从搭建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打开这个项目进行一些配置了
- 在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 // 这里写导入的组件的名称
}
]
})
- 在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
})
- 在src下新建一个文件夹views , 然后在views中新建一些自己的.vue页面文件
<template>
<div>
<h2>main</h2>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
- 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>