十分钟搞定vue-cli脚手架

原创 15038098692 随笔 vue 330阅读 2018-03-12 15:17:16 举报

怎么安装node.js----Node.js安装及环境配置之Windows篇 http://www.cnblogs.com/zhouyu2017/p/6485265.html

   1.进入node.js官网   http://nodejs.cn/download/

   2.查看 本机系统---计算机---系统属性:  windows版本:     windows7 旗舰版
                                        系统类型:  32位操作系统

   3.选择下载   Windows 系统 (.msi)  32位

   5.next   4次--------install----finish   (安装位置默认-------C:\Program Files\nodejs\)

至此Node.js已经安装完成,可以先进行下简单的测试安装是否成功了,后面还要进行环境配置
在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口

打开命令行工具(在当前文件夹下按住shift,右击鼠标---打开命令行工具):

node -v (查看node.js是否安装成功及版本号)(在4.x版本以上)

npm -v (查看npm版本号)(在2.3版本以上)

安装vue-cli:

           OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失

败,所有我还需要npm的国内镜像---cnpm。

           安装cnpm:

           在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,完成之后,我们就可以用cnpm代替npm来安

装依赖包了。

           1.打开命令行窗口,输入cnpm install -g vue-cli,回车  (有一个安装的过程,就可以全局安装了),

           2.等安装完成后,就可以使用vue这个命令,可以先看一下它的版本号:vue -V  (出现版本号说明我们已经安装成功了,可以使用vue这个命令

了)

           3.下面开始下载模板,vue init webpack vue-example1 (其中vue-example1是我们在本地创建的文件夹)(回车)

           4.下一步需要对第三方的模块进行安装,先cd进入到目录下边:

               cd vue-example1    (一定要先进入创建的项目文件夹下)
               npm install (把所有的模板全安装,有很多模块,安装需要过程) 

           5.安装好后,启动应用,打开vue-example1 文件夹后,在window系统下,按住shift键,右击----选择在此处打开命令行窗口

           6.打开之后输入npm run dev  (启动应用) (这个是在package.json中配置的)(启动应用后,自动会跳到welcome to Your Vue.js APP页面

),

           7.嫌这样启动麻烦?每次都要输入一次,有没有另一种启动方式呢?

           8.将整个项目放入IDE里面,讲解的老师用的是webstrom,来看一下webstrom是怎么来启动我们应用的:

                 一.打开package.json文件,这里面是我们项目的配置,和一些信息的描述,其中scripts这一项,是我们定义的一些脚本,其中我们刚

才跑的npm run dev

                   就是用的这个命令:  "dev":"node build/dev-server.js",它会去执行一下这一串"node build/dev-server.js",其实就是用node

来跑一个js文件。

           9.在webstrom中呢,右击,找到Show npm Scripts,把这些指令都会显示出来,如:dev 
                                                                                     start
                                                                                     build 
                                                                                     lint

              想启动它,只需要双击就可以,例如:双击以下dev  (等待过程,可以看到,正在启动"node build/dev-server.js")  (自动跳转到

welcome to Your Vue.js APP页面了) (应用打开了)

10.回过头来看我们打开的应用,应用的源码在哪里写着的?所有源码都是在srcz在src这个目录下。src文件夹下main.js是我们的入口文件,

                           (main.js的一些说明)

                在入口文件里面有一些注释,告诉你你可以使用import来进行加载,也可以在运行的时候,去webpack.base.conf中设置一些别名,

                我们使用到了vue,所以要把vue用import把它导进来,   import Vue from "vue",

                还导进了App        import App from "./App"     (./App 是相对路径,相对main.js这个文件,其实就是App.vue这个文件,在

webpack.base.conf中配置之后,就可以不用写后缀名了),

                还导进了router     import router from "./router"  (因为我们在选择使用模板的时候,使用了router,所以它会自动把router配置

好,把这个目录加载进来)
(它其实加载得失router文件夹下面的index.js,可以简写,不用写index.js就

行了)

                Vue.config.productionTip = false  (关闭我们生产环境的一些提示),

 new Vue({              //启动我们的应用                
    el:"#app",          //挂载点,以id=app  这么一个元素作为挂载点 
     router,            //路由,(如果说想在应用中使用路由这个功能,先把它给注入进来,router,是ES6的语法,可以写成router:router,其实就

是我们导进过来的对象import router from "./router")
template:'<App/>',//应用的模板,用到了App这么一个组件,其实就是我们导进的App:import App from "./App" ,用的时候要注意,先要通过

components:{ App }把它给注册进来
components:{ App }

});

11.App.vue这个文件做了一些什么事情?(是我们整个组件的一个入口)

            分为三个部分:   1.模板template        

                             2.逻辑 script

                             3.样式 style

<template>
<div id="app">
<img src="./assets/logo.png"> //相对路径 加载了一个logo
<router-view></router-view> //路由匹配到那些路径加载的视图
</div>
</template>

<script>
export default { //ES6的语法 export default后面导出一个对象
name: 'app' //定义一下当前组件的名字,需要用的时候把这个组件給导出去
}
</script>

12.看一下路由是怎么起作用,把<router-view></router-view> 放到App.vue这个文件中的?

13.打开router下的index.js这个文件,这里面就是跟我们路由一些配置相关的,

一.用到了vue,把它加载进来:import Vue from 'vue',

二.也用到了router,把它加载进来:import Router from 'vue-router',

三.import HelloWorld from '@/components/HelloWorld'  一个别名,在build文件夹里有一个webpack.base.conf.js文件,这里面是webpack的配置:

 在这个文件里可以看到这一项配置:resolve: {
                                           extensions: ['.js', '.vue', '.json'],    // 加载文件的时候不用写后缀名,(是因为在这里面已经

配置过了)
alias: {
'vue$': 'vue/dist/vue.esm.js', //别名 @符号就代表了src这个路径
'@': resolve('src'),
}
},

所以 import HelloWorld from '@/components/HelloWorld' 的意思相当于 import HelloWorld from 'src/components/HelloWorld'

14.Vue.use(Router) 作用是用来安装vue-router这个插件的,可以扩展vue的功能,之后再去安装插件的时候都会使用到vue.use这个函数

15.export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
}
]
})

export default //ES6提供的,用来导出这个模块里面某些API的,导出的是用new Router来创造的一个实例,

routes: [ //这个函数里我们其实传过去就是对路由规则的配置
{
path: '/', //斜杠代表根目录下边,如果我们访问根目录下面,它渲染的是component对应的视图,就是hello这么一个组件
name: 'Hello',
component: HelloWorld
}
]

16.修改components文件夹下的helloworld.vue文件中:

export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome tui my Vue.js App'
}
}
}

修改return中的内容,没有刷新页面时,可以看到视图会实时更新,这就使用到了某一个模块-----热加载,

在不刷新视图的情况下,某一个组件里面的数值发生改变了,那么他就会更新改变的那个内容。

评论 ( 2 )
最新评论
15038098692 1F 2018-05-04 13:11:39 2F

网速的问题吧?应该没问题的,我试了好多次

前端筱乐 2018-03-19 17:54:44 1F

安装镜像的时候报错 没成功怎么回事呢?前面的步骤都没问题。