1 搭建vue环境
- 安装Nodejs
官网下载Nodejs,如果希望稳定的开发环境则下LTS。
https://nodejs.org/en/download/ - 安装好后cmd输入node -v查询是否安装成功,如下出现版本号即为成功。
- npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,输入npm -v可得到npm的版本。
- 输入命令:path , 查看是否有nodejs的环境变量。
- 配置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” - 全局安装vue脚手架
cmd -> npm install --g vue -cli
- cmd -> vue -V
如果提示vue 不是内部或外部命令,将vue.cmd的目录添加至环境变量:
vue -V 测试ok
- 创建项目
打开项目目录cmd-> vue init webpack demo - 运行项目
进入项目目录cmd输入命令npm run dev 来运行项目。
- 打开浏览器
浏览器访问地址 http://localhost:8080 就可以查看效果。
备注:我们开发项目的时候只需在src目录下进行,推荐使用Visual Studio Code工具作为前端开发工具。