Vue项目搭建

一、创建项目

 1、cmd切换到目标文件夹

 2、执行命令创建项目(项目名称：vue-init-webpack）

    vue init webpack vue-init-webpack

 3、选择配置参数：

• ? Project name (vue-init-webpack)                项目名称，回车
• ? Project description (A Vue.js project)         项目描述，回车
• ? Author                                                         作者，回车
• > Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere              选择6kb选项
• ? Install vue-router? (Y/n)                               是否下载路由，y
• ? Use ESLint to lint your code? (Y/n)              是否使用ESLint标准，n
• ? Set up unit tests (Y/n)                                  是否需要测试，n
• ? Setup e2e tests with Nightwatch? (Y/n)       n
•  Should we run `npm install` for you after the project has been created? (recommended) (Use
   arrow keys)
  > Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself                        选第三项，自己安装依赖

4、使用webstorm打开项目，terminal运行“npm install”安装依赖

5、运行“npm run dev”运行项目样例

二、配置项目文件目录 

1、删除无关内容

2、文件目录

项目代码主要在src目录下，其中：

 三、引用vux/iview/Element

 1、安装vux

npm install vux --save

 2、安装less-loader

npm install less less-loader --save-dev

 3、安装vux-loader

npm install vux-loader --save-dev

 4、在 build/webpack.base.conf.js 的最后面添加代码：

const vuxLoader = require('vux-loader')
const webpackConfig = module.exports

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

 5、由于less版本存在问题，因此需要卸载重装

npm install less@3.9.0 -s

npm install less-loader@5.0.0 -s

---

1、安装iview

npm install iview --save

2、引入iview

main.js中：

import iView from 'iview';
import 'iview/dist/styles/iview.css';    // 使用 CSS
import './theme/index.less'
Vue.use(iView);

 3、定制主题

在src下新建theme文件夹，并在里面新建index.less文件：

@import '~iview/src/styles/index.less';

// 下面是要覆盖的变量，例如：
@primary-color: #8c0776;

4、在PC端开发需引用iview组件库统一主题时，需要的less的版本号会更低：

npm install less@2.7.3 -s

npm install less-loader@4.0.5 -s

---

1、安装Element

npm i element-ui -S

2、在main.js中按需引入组件库中的组件

import Vue from 'vue'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css';

// 按需引入组件
import {
  Button,
  Select
} from 'element-ui';
Vue.component('button', Button);
Vue.component('slect', Select);

// 阻止启动生产消息
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})