Vue2项目搭建及文件结构
首先我们需要安装vue-cli
vue-cli官网:cli.vuejs.org/zh/guide/in…
安装vue-cli命令:
- 使用npm命令安装: npm install -g @vue/cli
- 使用yarn命令安装: yarn global add @vue/cli
安装vue脚手架
我们可以通过在vs code中，打开集成终端，使用vue ui来进行创建文件以及安装一些我们需要的依赖等，或者我们也可以通过黑窗口去安装vue脚手架
使用Vue ui创建项目步骤:
1.
进入ui创建项目页面，点击创建-->设置自己的文件路径-->点击创建新项目
2.
项目名称自定义，但是必须是字母、数字，不能写汉字，包管理器根据自己的需求设置，一般选择npm
3.
预设如果是新手需要点击手动配置项目，有经验的程序猿可根据自己的预设方案进行安装
4.
新手点击手动配置之后进入当前页面，当前功能页面安装的是我们项目所需的依赖，通常选择Babel、Router、Vuex、Css四个功能
5.
- 第一个可根据自己的需求勾选，这个功能是关于我们的路由是否使用history
- 二个功能与css同出一辙的，有less、sass、stylus，根据自己需求选择，默认是less
6.
最后一步，是设置保存预设名，方便我们下次创建项目，可以直接使用预设的依赖，节省时间
文件目录及结构
在使用vue ui创建完成项目之后的文件效果如下图所示:
| 文件名称 | 文件用途 | |
|---|---|---|
| node_modules | npm install或yarn 下载的依赖包 | |
| dist | 我们打包后生成的文件夹 | |
| public | 用于存放公共js文件夹、json文件和图片等 | |
| src | 我们的开发的页面文件所放的文件夹 | |
| src/assets | 静态资源文件夹，如果图片放在这里是不能通过v-for标签渲染到页面上的 | |
| src/components | 此项目公共组件 | |
| src/router | vueRouter | |
| src/store | Vuex | |
| src/view | 我们开发的页面 | |
| browserslistc | 帮助css属性兼容不同浏览器 | |
| gitignore | 配置不需要上传的文件 | |
| babel.config.js | ES6语法转化的配置文件 | |
| package.json | 项目的核心配置记录，可以查看当前安装依赖的版本号 | |
| README.md | 相当于这个项目的笔记本，记录这个项目的备注事项 | |
| yarn.lock | 记录之前安装过的依赖的版本 |
如何启动项目以及自动打开
当我们不知道当前项目的启动命令的时候，我们可以打开package.json文件查看，例如下图:
打开package.json文件之后，我们找到调试(scripts)的一段代码，启动项目命令一般是在第一行，我们找到start对应的属性名，通过 npm run 属性名，就可以启动我们的项目
那么，如何在项目启动完成之后自动打开网页呢？ 我们可以再创建完成项目之后，在启动命令后面加 --open，就会自动打开
如何打包文件
看上图，与上面的步骤相同，打开package.json文件之后，我们找到调试(scripts)的一段代码，打包项目命令一般是在第二行，我们找到build对应的属性名，通过 npm run 属性名，就可以打包我们的项目，生成一个dist的文件夹
