使用vue-cli(脚手架)快速搭建项目

一、node.js安装在D盘

官网下载：https://nodejs.org/en/

1、在所安装的Node.js文件目录下创建 node_global 和 node_cache 两个文件夹

2、创建好以上文件，打开cmd，输入一下命令;

npm config set prefix "D:\strongsoft\nodejs\node_global"
npm config set cache "D:\strongsoft\nodejs\node_cache"

命令中的路径根据自己所创建的文件夹的路径

3、设置电脑的 环境变量：

在用户变量 的 Path 中，路径： 是 node_global 这个文件的路径；

在系统变量 中添加 NODE_PATH，路径： 是 node_global下的 node_modules 的路径(没有的话新建一个node_modules 文件)

二、Visual Studio Code 下载

官网下载：https://code.visualstudio.com/

三、脚手架搭建

1、安装vue-cli

1）使用npm全局安装webpack，命令：

npm install webpack webpack-cli -g

验证：

webpack -v

2）全局安装vue-cli，命令：

npm install --global vue-cli

验证：

vue -V

其中在所安装的路径D:\strongsoft\nodejs\node_global 下，可以看到上面安装的两个；打开node_modules也可以看到

2、用vue-cli来构建项目

1）首先在D盘新建一个文件夹（dxl_vue）作为项目存放地，然后使用命令行cd进入到项目所在的目录后，再输入命令

vue init webpack myVueProject[项目名称]

2）配置完成后，可以看到新建的文件夹（dxl_vue）下多出了一个项目文件夹myVueProject，然后使用命令行cd进入该文件夹，安装cnpm设置npm淘宝镜像源

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

3、启动项目

1）使用Visual Studio Code 打开所构建的项目文件夹myVueProject

2）安装依赖

cnpm install

3）运行启动项目

npm run dev

其中：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

4、vue-cli的webpack配置分析

1）package.json：可以看到开发和生产环境的入口
2）build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。
3）在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。
4）还有config/index.js 、build/utils.js 、build/build.js等，具体请看这篇介绍：
https://segmentfault.com/a/1190000008644830

5、打包上线

注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。
另：
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。