教学视频：https://www.bilibili.com/video/BV18E411a7mC
nodejs安装
安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
安装完成后，可以用 node -v命令查看是否安装成功.
安装镜像加速
Node.js安装淘宝镜像
命令：npm install cnpm -g
安装vue-cli
cnpm install vue-cli -g
查看是否成功 (如果vue-list命令不能使用，则进入npm对应的安装目录下执行即可)
命令:vue-list
搭建一个vue.js的脚手架
通过命令行创建一个vue-cli程序
-
随便选一个目录,用vue-init命令创建一个程序
image.png
image.png -
初始化并运行
命令：cd myvue
npm install
npm run dev
image.png
安装成功会有node_modules文件夹：
image.png
项目创建成功后，可以运行npm run dev，即可访问Vue.js成功页面。
image.png -
引入组件的方式
image.png
关于webpack
官网：https://www.webpackjs.com/concepts/
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
安装命令：npm install webpack -g
npm install webpack-cli -g
Vue Router介绍
官网:https://router.vuejs.org/zh/
安装:https://router.vuejs.org/zh/installation.html
可以使用命令行在项目中安装:( npm install vue-router --save-dev)
路由简单demo：
import Vue from 'vue'
import VueRouter from "vue-router"
//这是自定义的两个简单组件
import Content from "../components/Content"
import Main from "../components/Main"
//安装路由
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
//路由路径 相当有后端的controller请求路径
path: '/content',
name: 'content',
component: Content
},
{
path: '/main',
name: 'main',
component: Main
}
]
});
写完路由之后，需要在main.js中声明应用路由：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import VueRouter from "vue-router"
import router from './router' //自动扫描里面的路由配置 因为起名为index
Vue.config.productionTip = false
//显示声明使用VueRouter
/* eslint-disable no-new */
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
然后就是在App.vue中引用路由
<template>
<div id="app">
<h1>路由</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
import Content from "./components/Content";
import Main from "./components/Main";
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果如图：
关于Element UI
官网：https://element.eleme.cn/#/zh-CN/guide/design
安装：https://element.eleme.cn/#/zh-CN/component/installation
新搭建一个工程的步骤:
Npm命令解释:
应用Element UI 快速上手:https://element.eleme.cn/#/zh-CN/component/quickstart
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import VueRouter from "vue-router"
import router from './router' //自动扫描里面的路由配置 因为起名为index
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
//显示声明使用VueRouter
Vue.use(router);
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
//配置路由
router,
render: h => h(App),
components: { App },
template: '<App/>'
})
应用方式：在官网组件直接复制对应模板代码应用即可.
值得注意的是：
1.template模板中的内容不能直接应用，需要加一层div。
报错原因:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
解决方式可以看博客:https://blog.csdn.net/yangyiboshigou/article/details/72084619
2.package.json中的sass-loader版本不能太高,需要降低版本到7.3.1("sass-loader": "^7.3.1",)
然后执行npm install 或者cnpm install重新安装编译
<template>
<div>
<div class="block">
<span class="demonstration">默认不区分颜色</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">区分颜色</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
</div>
</template>
<script>
export default {
name: "Content",
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</script>
<style scoped>
</style>
效果图如下:
关于Vue参数传递和重定向
引用博客:https://www.cnblogs.com/pinked/p/12329626.html
该博客中有demo.
