Vue搭建与第一个vue-cli项目
- 安装Node.js
地址:
https://nodejs.org/zh-cn/download/
- 安装Git(可跳过)
- 安装淘宝镜像加速器
npm install cnpm -g
- 安装Vue-li
cnpm install vue-cli -g
- 查看可以基于哪些模板创建vue应用程序
vue list
创建一个vue-cli应用程序
创建一个基于webpack模板的vue应用程序
vue init webpack myvue
myvue是项目名称,自己取即可
接下来的操作就是一路选择No!
初始化并运行
cd myvue
npm install
#用idea打开项目
npm run dev
启动成功后访问:http://localhost:8080/
停止项目:crtl+c; 选择yes
安装webpack
安装:
#安装打包工具
npm install webpack -g
#安装客户端
npm install webpack-cli -g
测试安装:
webpack -v
webpack-cli -v
热部署打包:
webpack --watch
监听项目代买变化,一有变化,立马自动重新改打包,ctrl+c停止
安装vue-router路由
npm install vue-router --save-dev
定义路由:
在src下创建router,在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
}
]
})
在main.js中配置路由
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router' //自动扫码路面的路由配置
Vue.config.productionTip = false;
//显示申明使用VueRouter
Vue.use(VueRouter);
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
首页展示
<template>
<div id="app">
<!-- 控制路由展示 -->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!-- 展示templeat模板 -->
<router-view></router-view>
</div>
</template>
<script>
import Content from "./components/Content";
export default {
name: 'App',
comments: {
Content
}
}
</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>