Vue-cli安装（一）

一、node.js安装

- 下载地址：https://nodejs.org/en/，下载之后直接安装即可
1、设置nodejs prefix（全局）和cache（缓存）路径
1）在nodejs的安装目录下，创建2个文件夹node_cache和node_global
2）设置缓存文件夹：npm config set cache "D:\nodejs\node_cache"；设置全局模块存放路径：npm config set prefix "D:\nodejs\node_global"
2、基于 node.js 安装cnpm（淘宝镜像,为了提高npm使用效率）:
- npm install -g cnpm --registry=https://registry.npm.taobao.org
3、设置环境变量
1）系统变量中的path中添加：D:\nodejs\node_global
2）用户变量中的path修改成：D:\nodejs\node_global
3）新增系统变量：NODE_PATH = D:\nodejs\node_modules
4）到这里就安装好了，可以：node --version查看版本号，cnpm -v查看版本号，vue-cli要求nodejs要8.9以上貌似

二、全局安装webpack

webpack是一个前端资源的加载/打包工具
- 直接cnmp安装：cnpm install webpack -g
- 安装依赖：cnpm install webpack webpack-cli -g
- webpack -v查看版本，验证是否安装成功

三、安装vue-cli，目前最新的是vue-cli 4

1、如果有旧的版本1.x或者2.x，请先卸载
- npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它
2、安装vue-cli 4
- cnpm install -g @vue/cli，输入vue --version显示版本号即安装成功
3、创建vue项目
1）vue create helloworld
2）创建之后的操作请百度

四、项目结构解读

项目结构

1、node_modules：通过npm安装的一系列包的存放位置
2、public：打包的时候会原封不动的复制到dist文件夹下面的
3、src-assets：一般放一些公共资源，比如图片，css样式
4、src-components：放一些公共组件
5、src-router：配置路由映射信息index.js
6、src-stroe：Vuex目录文件，里面的index.js文件配置共享资源，大管家的作用
7、src-views：放一些导航路由
8、main.js：相当于配置文件中的入口文件
9、.browserslistrc：rc结尾文件的跟linux有关系，全称：run command。此文件夹是配置浏览器的，不用管
10、.gitignore：打包时的忽略文件
11、babel.config.js：babel的配置文件，用的很少
12、README.MD：一般开源项目都有这个文件

目录结构