image.png
VUE-Cli 脚手架
是VUE的一个工具;
作用：
1.生成目录结构；
2.完成本地开发调试；
3.在代码编写完后，对代码进行压缩和部署；
4.利用脚手架的热加载特性，搞代码效率；
5.使用单元测试，测试代码功能；
安装方法：
1.node 4版本以上，npm在3版本以上
2.先创建一个放vue-cli的文件夹(就是放VUE的项目文件)
3.安装指令：npm install -g vue-cli
4.检查是否安装成功：vue -V（V必须是大写）
5.下载模版：vue init webpack vue-example
说明：vue-example，是模版文件名，随便起的；前面的指令为指定命令；
6.下载过程中的设置说明：
a.? Project name vue-example ：确认项目名是否为vue-example，直接回车n；
b.？project descript(A Vue.js project)：对vue项目的描述，可以自己随便改写描述，写完后，直接回车；
c.？Author(WYsevenconsoloelog@126.com)：作者名，可以自己改，改后，直接回车；
d.？Vue build(Use arrow keys)：显示一些信息，直接回车；
e.？Install vue-router?(Y/n)：是否加载vue-roter，输入Y是加载，然后回车；
f.？Use ESLint to lint your code?(Y/n)：是否检查代码风格，输入Y，回车；
g.？Pick an ESLint preset：显示检查代码的一些信息，直接回车；
h.？Setup unit tests with Karma+Mocha？(Y/n)：是否要对代码进行测试，输入n，回车；
i.？Setup e2e tests with Nightwatch？(Y/n) ：是否要e2e，输入n，回车；
**以上都输入后，会显示需要输入的一些命令：
cd Vue-example
npm install
npm run dev
按照上面提示的命令，在Vue-example目录下输入相应命令即可；
其中npm run dev 为启动项目，会在浏览器中自动打开项目页面，http://localhost:8080/#/ 显示一个这样链接的页面，即为项目创建成功；
VUEX安装方法：
在当前项目文件中输入：
npm install vuex --save
项目文件目录说明：
- 一级文件目录说明：
1.build：webpack相关文件；
2.config：生产环境和开发环境的配置参数；
3.node_modules：第三方依赖；
4.src：项目源码文件，vue后缀的文件为，单文件组件
，这个文件里的代码，会被webpack进行处理；
main.js : 应用的入口文件；
app.vue : 组件的入口文件；
router下的imdex.js : 和路由加载相关
5.static：放置第三方资源，其中有.gitkeep，需要上传空白文件夹时，需要在文件后缀写.gitkeep
6..babelrc：配置浏览器不支持的ES6新语法的转换；
1）presets:预设，语法放转换的插件；
如：env是ES6转换成ES5的插件；
stage-2 草案阶段；
2）plugins：配置方法转换插件；
如：transform-runtime：ES6方法转换成ES5方法；
3）comment：转换后代码上是否增加注释，flase为不增加；
4）env：test使用测试的时候使用的；
7..editorconfig：配置编辑器的格式风格等；
如：文件编码；
8..eslintignore：代码检查时，设置需要忽略的文件；
默认忽略：build/.js config/.js
9.eslintrc.js：代码风格检查；
10..gitgnore：使用git提交项目时，忽略指定文件和文件夹；
11..postcssrc.js：设置css的一些规则；
12.index.html：项目运行的模版
13.package.json：项目的一些配置；
14.README.md：对项目的使用说明；
网友评论