vue项目整合semanticUI

从搭建vue项目开始为大家讲解

Vue项目搭建

如果我们的电脑从来没有安装过vue项目环境 , 那么

• 我们需要先为电脑安装node环境 node官网

• 然后我们使用npm全局安装cnpm

npm install cnpm -g   # 全局安装

• 然后我们安装vue-cli

npm install  vue-cli -g

• 查看vue创建模板 , 确保vue-cli安装成功

vue list   # 这条命令可以查看vue可以通过哪儿些模板创建vue程序

• 全局安装webpack

npm install webpack -g       # 安装webpack
npm install webpack-cli -g  # 安装webpack客户端

• 开始构建vue项目

# 创建一个名为hello-vue的vue项目
vue init webpack hello-vue   
# 安装路由组件
npm install vue-router --save-dev
# 安装element-ui组件
npm i element-ui -S
# 安装所有依赖
npm install
# 安装sass 加载器
cnpm install sass-loader node-sass --save-dev
# 安装axios
npm install --save axios vue-axios
# 运行项目进行测试
npm run dev

• 测试后项目可以跑
• 这时候我们需要用ide打开这个项目进行一些配置了

1. 在src文件夹下面新建一个router的文件夹 , 并且在router文件夹下面创建一个index.js文件

import Vue from 'vue' // 导入vue
import VueRouter from "vue-router"; // 导入vueRouter

import Main from "../views/Main";
import List from "../views/List";

Vue.use(VueRouter) // 显示使用VueRouter

export default new VueRouter({
  //mode: "hash",  // 默认是hash  路径中是带着#号的
  mode: "history",  // 路径中是不带#号的
  routes: [ // 在这里面写路由 , 每一个大括号就是一个路由
    {
      path: '/main', // 跳转的路径
      name: 'Main', // 给组件起的名字
      component: Main // 这里写导入的组件的名称
    },
    
    {
      path: '/list', // 跳转的路径
      name: 'List', // 给组件起的名字
      component: List // 这里写导入的组件的名称
    }
  ]

})

2. 在main.js中引入elementUI, axios , router

import Vue from 'vue'
import App from './App'

// 导入路由
import router from './router' // 这样会自动扫描router文件夹下面的index.js的配置

// 导入element-UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

// 使用elementUI
Vue.use(ElementUI);

// 使用axios
Vue.use(VueAxios, axios)

new Vue({
  el: '#app',
  router, // 配置路由的配置的
  render: h => h(App) // ElementUI
})

3. 在src下新建一个文件夹views , 然后在views中新建一些自己的.vue页面文件

<template>
  <div>
    <h2>main</h2>
  </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

4. App.vue中添加<router-view></router-view>标签

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App',
    components: {}
  }
</script>

在上面构建的vue项目中引入semanticUI

• 安装jQuery

npm install --save jquery

• 安装sematic-ui

npm install semantic-ui-css --save

• 配置webpack. dev.conf.js , 在plugins中添加这段代码

new webpack.ProvidePlugin({
      jQuery         : "jquery",
      $              : "jquery",
      "window.jQuery": "jquery",
      "root.jQuery"  : "jquery",
      // Semantic-UI
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css'
    }),

• main.js引入semanticUI

// 引入js文件，这里直接使用的是这个文件里的路径，不需要再resolver中修改路径之类的操作
import semantic from '../node_modules/semantic-ui-css/semantic.min.js'
// 引入css文件
import '../node_modules/semantic-ui-css/semantic.min.css'

Vue.use(semantic);

最简单的semanticUI引入方式

在vue中的index.html中引入cdn即可

<!--引入semantic的css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<!--jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--semantic-UI-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>