vue-cli

vue-cli

npm cache clean --force ------> 强制清楚缓存，下载包出错

初始化脚手架的时候，所在路径不能包含中文

• 安装：npm i -g vue-cli
• 创建项目：vue init webpack my-project(项目名字不要使用vue 或者 webpack)

目录解析：

• build：都是一些webpack的配置
• config：在/config/index.js里修改useEslint:false就可以关闭ESlint的校验
• static/.gitkeep：让git管理项目，不需要让webpack处理的东西或者已经处理过了的东西放到static里面，
• .babelrc:兼容低版本浏览器，转化新语法
• .editorconfig:统一编辑器风格
• .eslintignore：存放不需要校验的文件夹,忽略的文件
• .eslintrc.js:如果需要自定义ESlint校验规则，在这里面配置
  在.eslintrc.js中添加'space-before-function-paren':'off'关闭 方法名字后的空格校验规则，前提是使用了prettier- code fomatter这个vscode插件；
• .gitignore:git忽略的文件`
• .postcssrc.js：类似与less或者sass的预编译的css，功能强大
• index.html: vue单文件组件
• package.json:当前项目的自描述文件
• package-lock.json：npm5下载包会自动生成这个文件，里面有所有的依赖项
  
  在这里可以修改webpack打包读取的文件

src目录结构的说明

html
/assets                         放置资源文件，如果：图片，css
/components						放项目中所有的组件
/router							路由配置
App.vue							跟组件
main.js					        项目的入口文件，vue实例就是在这个文件中创建的

vue 不同构建版本的说明

• 完整版（运行时+编译器）
• 运行时（体积比完整版小 30%）
• import Vue from 'vue'默认导入的是： 运行时版本
• 如果要使用完整版，需要在 webpack中添加一个alias配置才可以
  路径是：build/webpack.base.conf.js中resolve的alias;

完整版
new Vue({
	el:'#app',
	router,
	//脚手架生成的项目中，默认采用完整版（运行时+编译器）
	components: {App},
	template: '</App>'
})

运行时
new Vue({
	el:'#app',
	router,
	render h => h('#App'))

@说明

@表示src目录；

路由

安装路由插件，在webpack这样的模块化系统中，必须执行这一步
Vue.use(VueRouter);