从头搭建一个vue项目（搭建构架1）

Vue环境搭建

1.概述：vue环境搭建：需要npm（cnpm），而npm内嵌于Node.js，所以需要下载Node.js。

2.下载Node.js：node.js官方下载

3.安装Node.js：双击 - 选择目录 - 一路next（安装程序会自动把node、npm环境变量配置好）。

4.测试Node.js，npm：打开cmd，输入 node -v 回车，输入 npm -v 回车（node内嵌npm），出现对应版本号说明安装成功，一般是不会有问题的。

5.设置缓存文件夹和全局模块存放路径：
在nodejs路径下新建两个文件夹——node_cache , node_global，然后配置：

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

(引号中路径需要针对自己实际的安装路径)
设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里，g就是global
tips：此时你可以在 C:\Users\Administrator 目录下找到 .npmrc文件，以文本打开会发现刚刚配置的信息原来在这里

6.安装cnpm：
简介：基于 Node.js 安装cnpm（淘宝镜像）。由于npm是国际的，国内访问很慢，所以善良的淘宝做了他的镜像 —— cnpm，来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

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

7.cnpm配置环境变量：
打开：任意文件夹 - （右键）此电脑 - 属性 - 高级系统设置 - 环境变量
新建CNPM_PATH变量 路径要根据自己的实际路径
…

打开cmd测试：cnmp -v；若失败则需要重启。

8:安装Vue:
安装vue：

cnpm install vue -g

安装vue-cli脚手架1：

cnpm install vue-cli -g

安装webpack2：
全局安装

cnpm install webpack -g

不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中。

9.创建vue项目：
创建一个基于 webpack 模板的新项目

vue init webpack my-project

这里需要进行一些配置，默认回车即可

之后会生成目录结构

10:打包并运行Vue项目：

cd my-project

cnpm install

cnpm run dev

出现Listening at http://localhost:8080即说明成功了，可以输入地址 http://localhost:8080 访问刚刚创建的vue项目啦。（在cmd中输入 Ctrl+C 退出）
.
.
.
————————————————
版权声明：本文为CSDN博主「aら　淼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：原文链接跳转