第三章 Vue-cli开启Vuejs项目（1）

第三章 Vue-cli开启Vuejs项目（1）

---

Vue-cli是Vue的脚手架工具

Vue-cli就是帮助我们写好Vue.js基础代码的工具。它能够帮助我们完成目录结构、本地调试、代码部署、热加载、单元调试等工作

vue-cli的GitHub地址

安装

vue-cli是一个node包，所以需要用npm安装，需要全局安装。

npm install -g vue-cli

使用

vue init <template-name> <project-name>

Example:

要确保node版本在4.0以上

vue init webpack sell

进行npm run dev，显示一下语句，接下来可以用浏览器打开http://localhost:8080，如果能显示，说明成功。

Your application is running here: http://localhost:8080

安装后的项目文件介绍

• bulid和config目录：webpack配置相关
• node_modules文件夹：npm install安装的依赖代码库
• src文件夹：存放项目源码
• static文件夹：存放第三方静态资源
  
  • .gitkeep：当这个目录为空，也可以把这个目录提交到git代码仓库里
• .babelrc： 是babel的一些配置，把es6通过babel编译成es5
• .editorconfig：编辑器的配置
  
  • charset：表示一些编码
  • indent_style = space：表示缩进风格，基于一个空格做缩进
  • indent_size = 2：表示缩进大小是两个
  • end_of_line = lf：表示换行符的风格，lf就是linux和mac的换行风格
  • insert_final_newline = true：表示当你创建一个文件会在文件末尾插入一个新行
  • trim_trailing_whitespace = true：自动移除行尾空格
• .eslintignore：忽略语法检查的目录文件
• .eslintrc.js:eslint的配置文件
• .gitignore:git仓库忽略的文件或目录，不会被提交到git代码里面
• index.html:入口html文件
• package.json:项目的配置文件，一般是用来描述一个项目
• README.md:项目的描述文件