脚手架

脚手架帮我们帮我们把 webpack 等相关的配置都处理好，我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置)

vue脚手架  vue-cli

我们使用任何东西第一步都是安装

1.安装脚手架(一般安装在全局)

//=>用npm安装
$npm install @vue/cli -g
//=>用yarn安装
$yarn global add @vue/cli

安装成功后，全局环境会生成 $vue 的可执行命令，我们可以基于 $vue --version 来查看版本号，看是否安装成功

2.创建工程化项目

$vue create [项目名称](要遵循npm包的名称规范:数字或者小写字母)

第一项是我之前创建保存的配置，如果是第一次创建就有第二项和第三项

default (babel,eslint) ：选择默认配置项（后期自己安装需要的模块和进行配置） Manually select features ：手动选择配置项

如果选择默认这篇文章就没有意义了，我们选择手动选择配置项

这里选择脚手架里的webpack配置，空格键是选择，我选择了以上这些项，如果有需要自行添减

babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、转换Vue JSX转换generator和async/await等 Router ：Vue官方的路由管理器 Vuex ：Vue中实现公共状态管理的插件 (处理组件之间的信息通信) Css Pre-processors ：CSS 预处理器（SASS/LESS/Stylus） Linter / Formatter ：eslint 语法检测 Unit Testing ：单元测试 E2E Testing ：端到端测试

是否使用路由器的历史模式，选择Y；选择哪个CSS 预处理语言的配置规则，我用的是less根据自己需要选择

选择自动化代码格式化检测，我用的 vscode 选的 ESLint+Prettier

选择第一个可以保存配置方便下次使用

第一个选项是把配置信息放到一个单独的文件 第二项是放到package.json里

创建后的项目目录

src ：项目开发源文件

main.js ：打包编译的入口文件 App.vue ：项目页面的入口文件 components ：存放当前项目的公共组件 xxx.vue assets ：一般存放项目中需要引入的静态资源文件 xxx.png xxx.css

public

index.html ：当前项目的主页面，我们最后把所有在src中写的内容，通过webpack、vue编译渲染，最后呈现在index.html中的#app容器中 xxx.xx ：有些时候我们的某些资源可能要单独在index.html就引用了，将它放在此文件夹下，但是开发时除了这样的资源，其余的都建议放在src文件夹中

开发模式下我们基于下面这个命令，启动一个本地服务，把基于webpack编译后的内容预览

$npm run serve 或者 $yarn serve

生产模式下，把写好的内容进行编译打包，最后部署到服务器上

$npm run build 或者 $yarn build