从零开始搭建一个VUE项目框架

安装和配置nodejs

1. node下载 官网网址

记得自己选择安装路径。

2. 测试是否安装成功

在控制台输入node -v npm -v可查看版本号。出现版本号即安装成功。

3. 配置安装目录和缓存日志目录

在安装node的文件夹下创建两个文件夹【node_global】及【node_cache】。

然后在命令行，执行命令：（改成自己的路径）

npm config set prefix "D:\...\node_global"

npm config set cache "D:\...\node_cache"

4. 环境变量配置

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，值输入D:\...\node_modules，将【用户变量】下的【Path】增加D:\...\node_global （改成自己的路径）

【NODE_PATH】 【Path】

5. 国内镜像网站配置

我们通过npm命令下载node模块的时候因为访问的是国外网站，所以可能会出现下载的很缓慢或者干脆是直接下载失败，在这种情况下，我们可以通过配置国内镜像来解决，一般配置的是淘宝npm镜像。

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

参考：www.cnblogs.com/biehongli/p…

vue-cli 脚手架

1. 使用 npm全局安装 webpack

打开命令行输入：npm install webpack -g，安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。

注意： webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g

2. 全局安装 vue-cli

在命令行中输入 npm install -g vue-cli

安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。

打开 node 的安装目录，也可以看到我们全局安装的 vue-cli

参考：blog.csdn.net/wulala_hei/…

最简单的项目

使用vue cli 快速创建项目

1. 打开终端，输入vue create demo创建项目。（“demo”可以改为自己的项目名）

2. 第一次创建项目你可以选 default(babel,eslint)，默认的包含了基本的 Babel + ESLint。选择 Manually select Features，你可以手动设置更多东西，后期你更加了解后可以选择此选项生成自己的配置。

3. 项目创建成功（可能会比较慢），然后cd demo进入到你创建的项目文件夹里（一定要在项目文件夹里）运行npm install，使用cnpm install也可以，上面也说过npm有时会比较慢或者会出错。

4. 成功之后，npm run serve运行，会出现一个网址，进入这个网址就可以看到创建的项目了。可以复制网址去浏览器打开。

5. 进入之后会看到vue的欢迎界面。这是项目的初始样式，自己做项目时可以把这些初始样式全部删掉。

看一下生成项目的文件结构及初始代码解析

---

这样就成功创建一个项目啦！