vue-cli的构建+Vue的超级简单实例
☞ vue-cli的构建☞ 构建一个简单的Vue导航栏菜单实例
·
☞ vue-cli的构建:
0.概要(精华):
# 安装vue-cli
npm install -g vue-cli
# 使用vue-cli初始化项目
vue init webpack my-project
# 进入到目录
cd my-project
# 安装依赖
npm install
# 开始运行
npm run dev
1.新建文件夹目录。
进入D盘的work文件夹:
$ d:
$ cd: work
新建名为vueProject的文件夹、并查看和进入:
$ mkdir vueProject
$ dir
$ cd vueProject
结果图:
2.检测 node.js 和 npm 版本(安装node.js和npm)
$ node -v
$ npm -v
3.安装vue-cli脚手架工具,命令(执行要一段时间):
$ npm install -g vue-cli
4.新建一个vue的项目,名为vueDemo,命令(如果出现错误,可能是vue-cli没有安装好,重新安装试试):
$ vue init webpack vuedemo
再根据参数名(解释如下),选择Y/n等。结果图:
5.进入新建的vuedemo目录、安装依赖命令(需要等待一段时间,如果长时间没有响应,就ctrl+c停止掉,然后再执行一次即可):
$ cd vueDemo
$ npm install
结果图:
6.开始运行,命令:
$ npm run dev
结果图(访问的网址):
注意:假如8080端口被占用,修改如下文件中的端口号即可。
7.访问,在浏览器中输入 localhost:端口号。
结果图:
8.用WebStrom查看已构建的项目:
☞ 构建一个简单的Vue导航栏菜单实例
1.新建组件文件夹(pages)及文件(index、userCenter、userInfo):
index.vue代码:
<template>
<div>
<p>这是首页</p>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
p{
display: block;
background: #ffe87c;
}
</style>
userCenter.vue代码:
<template>
<div>
<p>这是个人中心</p>
<router-link to="/userCenter/userInfo">用户信息</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
p{
display: block;
background: #d6e9c6;
}
</style>
userInfo.vue代码:
<template>
<div>
<p>我的名字是:阿水12344</p>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
p{
display: block;
background: #77FFFF;
}
</style>
2.在路由配置文件中,导入新建的组件。(index.js我们不用了)
router.js代码:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/HelloWorld'
import Index from '../pages/index'
import UserCenter from '../pages/userCenter'
import UserInfo from '../pages/UserInfo'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/index',
name: 'index',
component: Index
},
{
path: '/userCenter',
name: 'userCenter',
component: UserCenter,
children: [
{
path: 'userInfo',
name: 'userInfo',
component: UserInfo
}
]
}
]
})
3.在项目入口App.vue中建立导航栏,代码如下:
<template>
<div id="app">
<img src="./assets/logo.png">
<p>这可以看做是导航栏</p>
<router-link to="/index">首页</router-link>
<router-link to="/userCenter">个人中心</router-link>
<router-view></router-view>
</div>
</template>
<script>
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>
4.修改mian.js
将
import router from './router'
改为:
import router from './router/router.js'
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 router from './router/router.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
其他文章链接:
更多推荐
已为社区贡献3条内容
所有评论(0)