Vue-cli
1.什么是 Vue-Cli
Vue-cli 是官方提供的一个脚手架!==可以利用它快速生成前端化的工程模板!
功能:
- 统一的目录!
- 快速调试!
- 单元测试!
- 在线运行
- …
2.Vue-Cli安装
#-g means install globally
npm install vue-cli -g
#select installed applications of vue
vue list
3.首个vue-cli程序
1.vue项目初始化
# myvue is the name of project
vue init webpack myvue
初始化项目前可以按照需求选择安装vue-router,ESlint,unit tests,样例选择的N;实际可以按照自己需求选择
2.完善依赖,运行程序
ps:下载的所有前端工程一般都没有依赖!
cd myvue # enter target catelog
npm install # install all the dependencies
npm run dev # start the project
用浏览器访问,可以看到vue的初始化项目页面效果
4.Vue-cli 目录结构分析
- build 和 config : webpack 配置文件,项目配置文件
- node_modules:这个一般在开源项目中都不存在,我们拿到项目的第一步就是 安装所有依赖 (npm install)
- src: 项目的源码目录! (Vue项目 和 js 代码)
- static: 静态资源文件!
- .babelrc: Babel配置文件 (ES6语法转换为 ES5语法!)
- .editorconfig: 编辑器配置
- .gitignore: git文件忽略配置
- .postcssrc.js: css 相关的配置文件,就是导入了css的插件
- index.html: 首页,所有的页面都是通过这里跳转的,实际开发是不使用这个文件的!
- package.json: 项目的配置文件(名称、版本、描述、作者、依赖、启动脚本 …)
1.main.js详解
// es6语法,导入组件和依赖!
import Vue from 'vue' // vue 依赖
import App from './App' // 导入组件
Vue.config.productionTip = false // 关闭浏览器控制台关于环境的提示!
/* eslint-disable no-new */
// vue的核心对象
new Vue({
el: '#app', // 节点
components: { App }, // 组件
template: '<App/>' // 模板
})
2.App.vue详解
<!-- HTML 代码模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<!--JS 代码 -->
<script>
// JS 代码, 导入我们自己写的模块!
import HelloWorld from './components/HelloWorld'
// 导入对象App,在其他地方导入的话就可以直接使用了!
export default {
name: 'App',
components: {
HelloWorld // 组件!
}
}
</script>
<!--CSS 样式: 如果没有加 scoped 就是全局生效,如果增加了就是当前页面生效!-->
<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>
5.vue-cli集成vue-router
安装vue-router
npm install vue-router --save-dev
6.基于vue-cli编写自己的项目
1、清空项目的多余内容!
2、定义自己的组件
这里在components下面定义Content.vue和Main.vue两个组件
Content.vue
<template>
<div>
<h1>内容页</h1>
</div>
</template>
<script>
export default {
name: 'Content'
}
</script>
Main.vue
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'Main'
}
</script>
3、编写路由
index.js
// 导入Vue
import Vue from 'vue'
// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);
// 导入我们自己写的组件, 不需要增加 .vue 后缀!
import Content from '../components/Content'
import Main from '../components/Main'
// 配置路由
export default new VueRouter({
// 就是我们上周讲的
routes: [
// 规则1 , content 内容页跳转规则!
{
path: '/content',
name: 'content',
component: Content
},
// 规则2
{
path: '/main',
name: 'main',
component: Main
}
]
})
4、在 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'
Vue.config.productionTip = false
// 导入我们的路由规则, 自动识别 index.js
import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 挂载路由!
components: { App },
template: '<App/>'
})
5、在App.vue中使用
<template>
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</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>