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

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

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-cli

命令行输入： 

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v  //查看安装情况

cnpm install -g vue-cli   //使用 cnpm 安装 vue-cli

vue -V //安装完成后查看安装情况

 

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

 

三：生成项目

1.打开命令行

2.进入项目的目录，示例如 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

vue完成项目后，打包成静态文件

 

四：打包 VUE 项目

1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的）

2.在cmd里面运行

npm run build

(运行的是build里面的build.js文件)

打包完成后会自动生成dist目录，直接把生成的目录交给后台在服务器配置就ok了。

正常情况下是可以直接运行的，但是不排除中间有意外情况发生，

我踩过的坑和解决方法：

1.启动项目失败-端口被占用
解决方法：打开config/index.js修改端口

dev: {

env: require('./dev.env'),

port: 8080,

autoOpenBrowser: true,

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

2.Node.js Cannot find module 'xxxx'问题解决方法：
设置环境变量:
export NODE_PATH=/usr/local/lib/node_modules/

echo $NODE_PATH

或者把node_module整个文件夹删掉,然后

npm clean cache

看下package.json里有没有express的依赖项,有的话直接

npm install

没有的话 

npm install express --save