使用 vue-cli 构建项目
vue init webpack project-name #创建基于 webpack 模板的名为 project-name 的项目
* 一路按回车, 直到 ESlint 选项的时候选择否 *
安装项目依赖
- cd project-name // 进入项目目录
- NPM install // 安装项目依赖
- NPM run dev // 运行项目
浏览器打开 localhost:8080 即可看到欢迎页面
但是这个只能在本地跑, 要如何在我们自己的服务器上访问呢? 此时需要执行 NPM run build
引入 Element-UI 及配置
在项目中引入 Element-UI
cd 项目目录
NPM i element-ui -S
成功引入后可在 node_modules 中找到 element-ui 文件夹, 也可以在 package.JSON 文件中的 dependencies 属性中找到 element-ui 依赖
配置 main.JS
- import Vue from 'vue'
- import App from './App'
- import router from './router'
*************** 完整引入 element-ui**************
- import ElementUI from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.CSS'
- Vue.use(ElementUI)
- ********************END***********************
- Vue.config.productionTip = false
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- router,
- components: { App },
- template: '<App/>'
- })
检查是否引入成功
在 App.vue 中插入一小段 Element-UI 代码查看页面是否显示
- <template>
- <div id="app">
- <!-- <Test></Test> -->
- <img src="./assets/logo.png">
- <router-view/>
************* 插入示例代码部分 *************************
- <el-row>
- <el-button > 默认按钮 </el-button>
- <el-button type="primary"> 主要按钮 </el-button>
- <el-button type="success"> 成功按钮 </el-button>
- <el-button type="info"> 信息按钮 </el-button>
- <el-button type="warning"> 警告按钮 </el-button>
- <el-button type="danger"> 危险按钮 </el-button>
- </el-row>
- ******************END********************************
- </div>
- </template>
关闭 ESlint 检查
关闭的目的是为了防止报一些缩进等代码格式类的错误.
- module: {
- rules: [
******************** 注释掉此行 ********************************
- // ...(config.dev.useEslint ? [createLintingRule()] : []),
- **********************END***********************************
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: vueLoaderConfig
- },
来源: http://www.jianshu.com/p/814cfec8c090