单页面应用程序
介绍:Single Page Application,简称SPA。一个web网站中只有一个HTML页面,所有的功能和交互都在这一个页面中完成
VUE-CLI
介绍:vue-cli是vue.js开发的标准工具,它简化了程序员基于webpack创建工程化的vue项目的过程
VUE-CLI安装
cnpm i -g @vue/cli
VUE-CLI的使用
1 vue create 项目名,选择手动配置
2初学者建议以下选项
3选择vue2
4选择less
5选择独立配置文件,而不是在合并到package,json中
6是否保存当前配置为预设
7如果选yes,则需要为该预设配置命名
8配置成功,cd test快速进入test目录;npm run serve快速运行项目
VUE-CLI生成项目的目录结构
public目录下的index.html为该项目唯一的单页面html页面
vue项目中src目录的构成:
assets文件夹:存放项目中用到的静态资源文件,例如:css样式表,图片资源
components文件夹:程序员封装的可复用的组件,都要放到components目录下
main.js是项目的入口文件。整个项目的运行,要先执行main.js。webpack打包入口文件(相当于entry节点的作用)
App.vue是项目的根组件
VUE项目的运行过程
在工程化的项目中,vue通过main.js把App.vue渲染到index.html的指定区域中
main.js文件内容:
//导入vue这个包,得到Vue构造函数
import Vue from 'vue'
//导入App.vue根组件,将来要把App.vue中的模板结构,渲染到HTML页面中
import App from './App.vue'
Vue.config.productionTip = false
//创建Vue实例对象
new Vue({
//把render函数指定的组件,渲染到HTML页面中(public下的index.html中)
render: h => h(App),
}).$mount('#app')
//以上也可以写成
new Vue({
el:'#app'
render: h => h(App),
})