目前一直使用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:'../../',以用来解决打包后图片路径的问题
由于现在网上搭建方式很多,可能由于版本问题原因,有些搭建方式有问题。所以本文只是对自己快速搭建环境而写!