vue项目搭建及UI引入

vue项目搭建及UI引入

一、vue项目创建

1. 安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue脚手架vue-cli

cnpm install -g vue
cnpm install -g vue-cli

3. 安装webpack

cnpm install -g webpack

4. 进入项目需要创建的目录

cd /home/web-vue

5. 创建vue项目

vue init webpack vue-demo

6. 进入项目目录

cd vue-demo

7. 运行项目

npm run dev

二、vue项目引入iview

1. 安装iview

npm install view-design --save

2. 项目的main.js引入如下配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

三、vue项目引入element

1. 安装element

npm i element-ui -S

2. 项目的main.js中引入如下内容

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});