vue-cli项目文件说明

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([email protected])：作者名，可以自己改，改后，直接回车；
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：对项目的使用说明；