目前一直使用vue去搭建项目，我个人习惯用Visual Studio Code编辑工具，所以下面的所有操作都是在这个编辑器中
在安装的时候，为了避免安装过程中出错，你最好安装了淘宝镜像（官网：https://npm.taobao.org/）
npm install -g cnpm --registry=https://registry.npm.taobao.org
1，安装vue-cli
cnpm install vue-cli -g // 通过vue -V查看vue版本号
vue init webpack
Generate project in current directory? (Y/n) 在当前目录中生成项目（是）
Project name (admin)项目名称
Project description (A Vue.js project) 项目描述
Author 作者
Vue build (Use arrow keys)选则Runtime + Compiler: recommended for most users
Install vue-router? (Y/n)是否下载vue-router（是）
Use ESLint to lint your code? (Y/n)是否使用ESLint（否）
Set up unit tests (Y/n)是否设置单元测试（否）
Setup e2e tests with Nightwatch? (Y/n) 是否使用e2e（否）
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)项目创建后，我们应该为您运行“NPM安装（是）
npm run dev 运行项目
2，安装elementUI
cnpm install element-ui --save
在main.js中写入以下内容:
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' （这的路径可能会有所改动）
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
3，安装less（CSS 预处理语言）
cnpm install less less-loader --save
<style lang="less"> 在使用less的文件中的style标签上添加 lang="less"
<style>
4，安装axios
cnpm install axios --save
import axios from 'axios' 哪个文件需要用到就在哪个文件中引入
5，安装qs
npm install --save axios vue-axios qs
import qs from 'qs' qs 用来解决vue中post请求以 a=a&b=b 的格式（详情）
6，打包
由于直接打包不能正常预览，所以需要配置
在webpack.prod.conf.js中output添加参数publicPath:'./'
在utils.js中，找到 return ExtractTextPlugin.extract( 在里面添加 publicPath:'../../',以用来解决打包后图片路径的问题
由于现在网上搭建方式很多，可能由于版本问题原因，有些搭建方式有问题。所以本文只是对自己快速搭建环境而写！
网友评论