Vue项目搭建 -- visual Studio加vue-cli

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli


一:安装node.js

不废话,直接上连接,里面有教程:http://www.runoob.com/nodejs/nodejs-install-setup.html

安装完成之后,在cmd命令行工具输入node - v ,如果能显示版本号就说明成功安装了。

Vue项目搭建 -- visual Studio加vue-cli


二:安装vue-cli

命令行输入: 

npm install -g cnpm --registry=https://registry.npm.taobao.org
再输入cnpm -v查看安装情况
 
然后使用 cnpm 安装 vue-cli 
cnpm install -g vue-cli


安装完成后,可以使用 vue -V 查看安装情况 
Vue项目搭建 -- visual Studio加vue-cli 
 
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本 
 
三:生成项目
在命令行进入项目的目录,例如D:/work输入(1. D:   回车    2. cd work   回车)
然后继续在命令行输入:
vue init webpack Vue-ProjectDemo
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板 https://github.com/vuejs-templates
Vue-ProjectDemo 是项目文件夹名称 
接下来按照提示进行简单的项目信息填写,这样就成功了一个vue框架的创建项目了
 
在vs打开项目后,进入终端安装依赖
cnpm install
 
然后启动项目:
npm run dev


 
启动项目失败的坑: 
1.端口被占用
解决方法:打开config/index.js修改端口
Vue项目搭建 -- visual Studio加vue-cli 
 
2.Node.js Cannot find module 'xxxx'问题解决
设置环境变量:
export NODE_PATH=/usr/local/lib/node_modules/
 
echo $NODE_PATH
 
 

分享