vue-cli3从零开始搭建vue项目

准备环境

1.下载安装Node.js

下载地址：https://nodejs.org/en/download/

使用Vue-cli3.0创建项目时，Node.js版本必须是8.9 或更高版本(推荐 8.11.0+)，可进入Vue-cli3官网查看相关说明

启用cmd(按下Windows+R，在打开的“运行”程序窗口，输入“cmd”，并按下回车键，即可打开系统自带的命令提示符。)查看是否安装成功，如果输出版本号，则表示安装成功

npm -v

2 安装cnpm

npm是Node.js提供的包管理工具，因为npm安装插件是从国外服务器下载，会出现插件无法安装的情况，可以用淘宝镜像cnpm代替默认的 npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

启用node.js 输入cnpm -v 查看cnpm版本，检查是否安装成功

安装vue-cli3

如果已安了vue-cli2，需要先将vue-cli2卸载，重新安装vue-cli3。
执行npm uninstall vue-cli -g命令卸载之前的旧版本；
执行npm install @vue/cli -g命令安装最新版本。 -g或者global 表示全局安装
输入vue -v 查看vue 版本，检查是否安装成功

vue  -V

创建项目

1）新建项目 vue create my-vue

vue create my-vue

按键盘上下键可以选择默认（default）还是手动（Manually），在这里选择手动

2）选择配置，根据个人项目需求选择
注意，空格键是选中与取消，A键是全选
Babel 把符合最新标准的js代码向下编译成现在随处可用的版本
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router vue路由 。
Vuex 支持 vuex 状态管理。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

3）路由模式：hash路由和history路由。这里选择n
history路由可以将url中的#去掉
也可以在vue-router配置中修改

4）css的预处理，这里选择的是less

5）ESLint 提供一个插件化的javascript代码检测工具 选择的是Standard
6）何时检测 选择的是保存时检测
第一个是保存检测，第二个是fix和commit的时候检测

7）单元测试 选择了Jest

8）配置文件放置 选择了放置独立文件
第一个是放在独立文件夹，第二个是在package.json文件里

9）询问是否记录这一次的配置，方便下次使用，一般会选择n

10）等待下载

11）装好后，就可以启动项目了
cd my-project // 进入到项目根目录
npm run serve // 启动项目

目录结构

node_modules ：项目依赖(对webpack进行了封装)
public ：
1.favicon.ico 是 网站图标
2.index.html 页面入口文件
src ：资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。
assets ：资源文件夹，放图片之类的资源，
components ：组件文件夹，写的所有组件都放在这个文件夹下，
router ：路由文件夹，这个决定了页面的跳转规则，
App.vue：应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js ：webpack入口文件。
package.json 项目描述及依赖
package-lock.json 版本管理使用的文件

vue cli3版本和vue cli2 相比文件目录少了很多配置，没有了build和config目录，那么像vue cli2 之前的关于端口号的配置，打包之后路径的配置，图片的配置 等等，应该去哪里配置呢，vue cli3 可以在项目根目录新建一个vue.config.js文件（是根目录，不是src目录），像之前的很多繁琐配置，都可以在这个文件里配置。