vue-cli 是 vue 提供的脚手架工具.
什么是脚手架: 在工地山工人搭建的这些架子就是脚手架, 会帮助工人们完成一些工作.
在技术圈里面, 脚手架就是帮助我们编写一些基础的代码.
vue-cli 脚手架可以:
[color=#92d050] 1. 生成目录结构
2. 本地开发调试
3. 代码部署 (代码编写完成后, 对其压缩)
4. 热加载 (提高我们编程效率)
5. 单元测试 (测试我们代码功能)
[/color]
vue-cli 是如何进行安装和使用的?
1. 打开官网 (GitHub) https://github.com/vuejs/vue-cli , 找到 read me 模块
2. 查看到安装的信息, 我们需要 node.js4 以上的版本, npm 需要在 3 的版本以上,
3. 当满足这个条件之后后, 我们使用 $ npm install -g vue-cli (-g 全局安装, 全局安装后呢, 就提供了 vue 这个命令),
4. 选择初识化的一个模板,$ vue init <template-name> <project-name>,
官网给我们推荐了三个模板, 1. 基于 webpack 和 browserify(分功能比较全的和功能简单的两个版本),
使用 webpack 模板后生成的目录如下网址所示:
https://github.com/vuejs-templates/webpack (打开 template 文件夹)
5. 回头看,<project-name> 它是在我们本地生成一个文件夹, 文件夹里面放的就是我们刚看的 template 模板的目录结构,
安装 vue-cli:
1. 打开命令行窗口, 输入 npm 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
- }
- ]
来源: http://www.qdfuns.com/article/39070/e75737b49c299193a676a83fa5816cba.html