1,Windows 安装包(.msi) node 安装
32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi
64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
2. 检查 node 版本 : node --version
3. 开始搭建 vue 工程
1. 可以安装淘宝镜像
NPM install -g cnpm --registry= https://registry.npm.taobao.org/ 这样你以后再通过终端安装包就直接用 cnpm 代替 NPM, 这样的好处是下载的包会比较快, 因为淘宝镜像的服务器在国内 杭州, NPM 的服务器在国外, 所以这边由于距离原因导致路由响应的一个距离延迟.
- # 建议不要用 cnpm 安装 会有各种诡异的 bug 可以通过如下操作解决 NPM 下载速度慢的问题
- NPM install --registry=https://registry.npm.taobao.org
4. 保证环境里有 webpack:
全局安装: NPM install -g webpack
开发环境安装: NPM install --save-dev webpack
- 5.# 全局安装 vue-cli 脚手架工具
- NPM install -global vue-cli
- # 创建一个基于 webpack 模板的新项目
- vue init webpack my-project
6. 安装依赖
- cd my-project
- NPM install
NPM run dev 运行 vue
7. 运行后出现下图就显示已经运行成功了
8. 我们可以通过浏览器打开 http://localhost:8080 就可以看到项目了
注: 因为 vue 项目监听的是 8080 端口, 请确保本机 8080 端口没被禁用
这里需要手动在浏览器打网址, 解决这个问题让 vue 项目直接 NPM run dev 之后自动在浏览器打开仅需要打开 vue 工程, 将 config -> index.JS ->dev 对象中的 autoOpenBrowser 属性设置为 true 就行, 如图:
7. 拓展安装
- NPM i vue-resource --save
- NPM i axios --save
- 7. # 在 src 目录下创建 views 文件夹, 用于管理各组件
- # main.JS 为入口文件, 全局导入 (import from) 和注册 (Vue.component http://vue.component/ ) 以及使用 (Vue.use) 写在这里, 也可以在 Vue 的原型上扩展方法(Vue.prototype.axios = axios)
- # 在 router 文件下配置路由
- # 在 components 文件下写公用组件
来源: http://www.bubuko.com/infodetail-3294529.html