网站首页 大前端  您当前的位置：首页> 学无止境> 大前端

VUE项目开发

发布时间：2017-08-30编辑：邻芯 （1735）人看过

如何快速构建vue项目，认识vue项目的工程化




一、环境配置
必须有node环境
配置方法：http://www.runoob.com/nodejs/nodejs-install-setup.html   
配置完成后
二、全局安装vue-cli webpack
1、前提node 版本 4.x及以上 ; npm版本3.0及以上
查看版本：
$ node -v  
$ npm -v
2、安装
$ npm i -g vue-cli webpack  
或指定版本安装
$ npm i -g vue-cli@2.8.1 webpack@2.4.1  
三、使用vue-cli
$ vue init
例如：
$ vue init webpack ts-project

四、构建并运行
$ npm install  
$ npm run dev
具体详细配置查看README.md或者package.json
 
 PS: 安装中如果出现以下错误
#### 错误一
``` bash
# npm ERR! phantomjs-prebuilt@2.1.14 install: `node install.js`
# npm ERR! Exit status 1
# npm ERR!
```
解决方式
``` bash
npm install phantomjs-prebuilt@2.1.14 --ignore-scripts
```
#### 错误二
``` bash
# ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-2406a849&scoped=true!./~/sass-loader/lib/loader.js?sourceMap!./~/vue-loader/lib/selector.js?type=styles&index=0
```
解决方式
``` bash
npm rebuild node-sass --force
```