一.环境的准备
使用vue的前提就是有node.js的环境
1.进入node.js官网下载
node.js官网
下载完成安装,会自动配置好环境
1.2安装淘宝镜像加速
安装完后可以使用cnpm 代替 npm 进行操作,但是可能有问题
npm install cnpm -g
2.安装vue-cli
npm install vue-cli -g
安装完成后,可以检验是否安装成功
vue list
二.第一个vue-cli应用
1.如在D:\MyDesktop\myproject中创建这个项目
2.首先使用管理员运行cmd,然后使用cd命令进入到c这个目录
3.然后创建vue项目
vue init webpack myvue01
4.然后进入项目中,进行启动
cd myvue01
npm install
npm run dev
5.启动以后你就可以通过http://localhost:8080进行访问了
三.webpack 学习
webpack 是一个现代的javaScript应用程序静态模块打包器(module bundler)。
他能把ES6规范的打包成ES5规范。
1.安装
运行下面两个命令
npm install webpack -g
npm install webpack-cli -g
然后查看是否成功
webpack -v
2.简单使用
1.创建一个空项目。随便创一个空文件夹,然后用idea,open这个文件夹就行了
2.创建一个modules的目录,用于放置JS模块等资源文件
3.在modules下创建模块文件,如hello.js,用于编写JS模块相关代码
//ES语法 暴露一个方法exports
exports.sayHi = function () {
document.write("<h1>webpack-study</h1>")
}
4.在modules下创建main.js,作为入口文件,用于打包时设置entry属性
//导入一个模块 require
var hello = require("./hello");
hello.sayHi();
5.在项目目录下创建webpack.config.js配置文件,指定入口文件,和出口位置
module.exports ={
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
};
6.控制台使用webpack命令打包,就会生bundle.js
webpack
四.vue-router路由
1.安装
npm install vue-router --save-dev
安装后就可以引入路由了
2.在components中创建一个组件Content.vue 用来作为主内容模块
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
3.再创一个Main.vue作为首页
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
4.在src下的router目录下创建一个index.js作为路由
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:[{
//路由路径
path:'/content',
name:'content',
//路由跳转组件
component:Content
},{
path:'/main',
name:'main',
component:Main
}]
});
5.在src下的main.js中配置路由
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由组件
Vue.config.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
6.最后在App.vue的template中使用路由
<template>
<div id="app">
<h1>学习</h1>
<!-- 相当于a标签-->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!-- 展示component-->
<router-view></router-view>
</div>
</template>
五.npm命令解释
命令 | 解释 |
---|---|
npm install moduleName | 安装模块到项目目录 |
npm install -g moduleName | -g 的意思是将模块安装到全局,具体安装到哪个磁盘的位置,要看npm config prefix的位置 |
npm install -save moduleName | –save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖,-S 为该命令的缩写 |
npm install -save-dev moduleName | –save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D 为该命令的缩写 |
六.完整的使用一次
1.管理员模式运行cmd,并且来到你放工程的目录
cd 你的路径
2.创建一个工程myvue02
vue init webpack myvue02
3.进入工程目录
cd myvue02
4.安装路由
npm install vue-router --save-dev
5.安装element ui
npm i element-ui -S
6.安装SASS加载器
npm install sass-loader node-sass --save-dev
7.安装axios
npm install --save vue-axios
8.安装依赖
npm install
9.启动
npm run dev
如果能访问到就成功了,确定之后ctrl+z ,按y停掉服务
10.用idea open这个项目
11.编写一个View
<template>
<div>
<el-row class="tac">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">选择</template>
<el-menu-item index="1-1">
<router-link to="/main">Main</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link :to="{name:'login',params:{name:5}}">Login</router-link>
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="20">
</el-col>
</el-row>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Main",
beforeRouteEnter:(to, from, next) => {
next(vm => {
vm.getData();
})
},
beforeRouteLeave:(to, from, next) => {
next()
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
getData:function () {
this.axios({
method:'get',
url:'http://localhost:8082/hello'
}).then(function (response) {
console.log(response)
})
}
}
}
</script>
<style scoped>
</style>
12.编写路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from "../view/Main";
import Login from "../view/Login";
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/main',
component:Main,
children:[{
path: '/login/:name',
name:'login',
component: Login
}]
}
]
})
13.在app.vue中添加路由视口
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
14.编写入口文件main.js的代码
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.use(router);
Vue.use(Element)
new Vue({
el: '#app',
router,
render:h=>h(App) //Element UI
})
10.再次启动服务,之后访问/main就可以看到页面了
npm run dev