Vue+Element-UI构建项目

vue-cli构建基于webpack的项目

1. 使用vue-cli构建项目

   vue init webpack project-name #创建基于webpack模板的名为project-name的项目
   
   * 一路按回车，直到ESlint选项的时候选择否*
   

2. 安装项目依赖

   cd project-name      //进入项目目录
   npm install          //安装项目依赖
   npm run dev         //运行项目
   

3. 浏览器打开localhost：8080即可看到欢迎页面

   但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？此时需要执行npm run build

引入Element-UI及配置

1. 在项目中引入Element-UI

   cd 项目目录
   npm i element-ui -S
   

   成功引入后可在node_modules中找到element-ui文件夹，也可以在package.json文件中的dependencies属性中找到element-ui依赖

2. 配置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/>'
   })
   
   

3. 检查是否引入成功

   在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>
   

4. 关闭ESlint检查

   关闭的目的是为了防止报一些缩进等代码格式类的错误。

   module: {
       rules: [
       ********************注释掉此行********************************
         // ...(config.dev.useEslint ? [createLintingRule()] : []),
       **********************END***********************************
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: vueLoaderConfig
         },