Vue项目搭建-蒲公英云

Vue项目搭建

一：安装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