vue 脚手架环境搭建

1 搭建vue环境

1. 安装Nodejs
   官网下载Nodejs，如果希望稳定的开发环境则下LTS。
   https://nodejs.org/en/download/
2. 安装好后cmd输入node -v查询是否安装成功，如下出现版本号即为成功。
   
3. npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm，输入npm -v可得到npm的版本。
   
4. 输入命令：path , 查看是否有nodejs的环境变量。
5. 配置npm
   1）在nodejs安装目录新建两个文件夹 npm_gobal 和 npm_cache ：分别用于npm的全局路径和缓存路径。
   npm默认全局路径地址和缓存路径是在C盘的appData目录下，如果后期需要使用或者查看很不方便，而且还给C盘增加压力，因此最好修改下，一般情况下建议放到nodejs的安装目录下。
   2）设置npm全局路径和缓存路径的环境变量：
   右击“此电脑”，“属性” -> “高级属性” -> “高级” 标签页 -> “环境变量” ：点击"path" -> 编辑->点击弹出框中点击空白行->浏览->选择新建的npm_gobal文件夹->确定->点击弹出框中点击空白行->浏览->选择新建的npm_cache文件夹->确定->确定->关闭属性窗口
   3）“以管理员身份” 运行cmd, 用命令配置npm:
   配置npm的全局路径： npm config set prefix “D:\Program Files\nodejs\npm_global”
   配置npm的缓存路径：npm config set cache “D:\Program Files\nodejs\npm_cache”
   更换镜像站为国内的淘宝镜像站：npm config set registry=“http://registry.npm.taobao.org”
6. 全局安装vue脚手架
   cmd -> npm install --g vue -cli
   
7. cmd -> vue -V
   如果提示vue 不是内部或外部命令,将vue.cmd的目录添加至环境变量：
   
   vue -V 测试ok
   
8. 创建项目
   打开项目目录cmd-> vue init webpack demo
9. 运行项目
   进入项目目录cmd输入命令npm run dev 来运行项目。
   
10. 打开浏览器
    浏览器访问地址 http://localhost:8080 就可以查看效果。

备注：我们开发项目的时候只需在src目录下进行，推荐使用Visual Studio Code工具作为前端开发工具。