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工具作为前端开发工具。