vue命令在当前⽬录快速⽣成项⽬详解，vue项⽬⽬录⽂件说明
准备：全局安装脚⼿架⼯具 vue-cli
npm命令npm i vue-cli -g
如果安装了yarn 可以⽤yarn global add vue-cli
安装之后通过vue --version可查看版本
1，使⽤vue命令在当前⽬录快速⽣成项⽬ vue init webpack 项⽬名字
1，默认项⽬名字
2，默认项⽬描述
3，作者（默认读取git配置）
4，选择构建版本， 选择runtime⽣成⽂件更⼩⼀点，约⼩30%
5，是否安装vue-router（路由） y
6，是否使⽤eslint校验代码 y
7，选择eslint标准 standard
8，单元测试 n
9，是否设置e2e设置 n
10，安装依赖包 安装yarn之后就选择yarn，没有就npm
2，根据命令1进⼊项⽬，命令2运⾏项⽬命令2也可以⽤ yarn dev（config⽬录下index.js中的autoOpenBrowser设置为true可配置为⾃动打开浏览器）
3，vue项⽬⽬录说明：
1, build⽬录： 跟webpack相关的⽬录
2, config⽬录：常⽤的配置index.js
autoOpenBrowser: true: 是否⾃动打开浏览器
useEslint: true (是否使⽤eslint校验代码)
3, src⽬录： 写代码的地⽅
4, static⽬录：static⽬录中的⽂件不会被webpack打包
.gitkeep: 如果⼀个⽬录是空的，会git忽略掉 （不显⽰）加.gitkeep⽂件可以被git管理
5, babelrc: babel的配置⽂件
6, editorconfig: 编辑器的配置 保证将来所有的编辑器的代码的缩进风格都是⼀样的git常用指令
vscode需要⼀个插件 editorconfig
7, eslintigore: 打包后的⼀些⽬录忽略掉
8, eslintrc: eslint的配置⽂件
8, .gitignore: git的忽视⽂件
9, postcssrc.js：预编译（类似sass，less）
10, index.html 整个vue项⽬的模板⽂件
11, package.json 项⽬的包⽂件
12， 执⾏⽂件
13, yarn.lock 安装yarn的时候⼀个配置⽂件
4，src⽬录：
1，assets⽂件： 存放静态资源，公共的图⽚，公共的样式，公共的js等
2，componenents : 存放组件
3，router ：存放路由（index.js）
4，App.vue : 整个页⾯的根组件
5，main.js : 初始化vue实例并使⽤所需要的插件（其中初始化了⼀个vue对象,el为实例提供挂载元素）
5，关闭vue⽣产提⽰
6，这⾏注释能避免实例化对象没有接收或使⽤⽽报错
/* eslint-disable no-new */
7，配置路由 ：
1，引⼊vue-router
2，配置规则
8，新建组件：
1，在src下新建⽂件夹components，其中新建新组件
2，在main.js引⼊新组件
9，路由提取：
1，在src下新建⽂件夹router，其中新建index.js配置路由
2，把路由相关的放进去
到这⾥，就全部配置好了，其实步骤1，2之后，56789都是⾃动配置好的，我们只要使⽤就好啦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。