一. 提前准备工作
1.Node.JS 环境
- Windows10
- NPM(前端包管理工具)
- webpack(前端资源加载 / 打包工具)
二. 开始安装
1.. 下载并安装 Node.JS
下载地址: https://nodejs.org/en/download/
2. 在 cmd 中查看 node.JS 是否安装成功, 以及是否安装 NPM
3. 由于 NPM 安装资源时速度慢, 推荐使用淘宝的镜像及其命令 cnpm, 安装使用介绍参照: 使用淘宝 NPM 镜像.
#查看版本
NPM -v
#升级 NPM
cnpm install NPM -g
#升级或安装 cnpm
NPM install cnpm -g
4. 安装 vue 的脚手架工具 (vue 项目前期项目目录结构的工具)
cnpm install -global vue-cli
查看安装目录 C:\Users\Administrator\AppData\Roaming\NPM
5. 在 cmd 中使用 webpack 创建一个 vue 项目
- # 进入到项目目录
- cd D:\project\vue
- # 创建项目
vue init webpack 项目名称
之后会出现对话提示.
"Project name": 这个是项目名称, 默认是输入时的那个名称, 想改的话直接输入修改, 也可以直接回车
"Install vue-router": 是否需要 vue-router, 这里默认选择使用, 这样生成好的项目就会有相关的路由配置文件
"Use ESLint to lint your code": 是否使用 ESLint, 刚才说了我们这个项目需要使用所以也是直接回车, 默认使用, 这样会生成相关的 ESLint 配置
"Setup unit tests with Karma + Moch?": 是否安装单元测试. 由于我们现在还没有单元测试, 所以这里选择的是 "N", 而不是直接回车哦
"Setup e2e tests with Nightwatch": 是否安装 e2e 测试, 这里我也同样选择的是 "N"
这几个配置选择 yes 或者 no 对于我们项目最大的影响就是, 如果选择了 yes 则生成的项目会自动有相关的配置, 有一些 loader 我们就要配套下载. 所以如果我们确定不用的话最好不要 yes, 要么下一步要下很多没有用的 loader
5. 安装完成, 接下来就可以马上开始运行我们的 vue 网站了!
三. 运行第一个 Vue 网站
在 cmd 中输入以下命令
cd 项目名称
cnpm run dev
打开 http//:localhost:8080 就可以访问
来源: http://www.bubuko.com/infodetail-3012048.html