0
点赞
收藏
分享

微信扫一扫

Vue2.0教程(五) vue-cli 学习

陆公子521 2022-04-14 阅读 45
vue.js

1.单页面应用程序

1.1 什么是单页面应用程序

单页面应用程序(英文名:Single Page Application) 简称SPA,顾名思义,指的是一个web网站中只有唯一的一个HTML页面,所有的功能与交互都在这个唯一的页面内完成。

2. 什么是vue-cli

vue-cli 是vue.js 开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。

程序员可以专注于撰写应用上,而不必花好几天去纠结webpack配置问题。
中文官网:https://cli.vuejs.org/zh/

2.1 安装和使用cli

vue-cli 是npm 上的一个全局包,使用npm install 命令,即可方便的把它安装到自己的电脑上:
npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目:
vue create 项目的名称
下载完成后,使用 vue -V 可以查看vue-cli版本

2.2 cli创建项目 实例

vue create first
之后需要选择一些配置
1)第一个选项面板

  • 一般选择第三项,Manually select features 手动选择配置
    2)之后是第二个选项面板
    上下箭头移动 空格选中,带*是选中
  • Babel一定要装,处理js高级语法的模块,ts先不用装,progressive web app也不装,router 和 vuex也不装
  • css pre-processors css预处理器装一下
  • Linter先不装(严格模式)约束代码风格
  • 其他的测试也不装
    3)第三个页面
    选择vue版本 ,这里选择2.x
    4)第四个页面
    选择Less
    5)第五个页面
    选择第一项,dedicated config files,单独的配置单独放出来
    6)第六个页面
    预设,把之前的配置存起来 按y ,否则按n

完成之后,进入终端 npm run server 就能启动项目。

2.3 介绍项目的目录结构

node_modules 下载的所有包
src 项目源代码目录
public 放了一个图标和唯一首页
babel.config.js babel配置文件
.gitignore git忽略文件
package.json

2.3.1 src目录

assets 存放项目中用到的静态资源文件(图片,样式表…)
components 程序员封装的可复用组件放在这里
main.js 是项目的入口文件,整个项目的执行要先执行main.js
App.vue 是项目的根组件

2.4 vue项目的运行流程

在工程化项目中,vue要做的事情很单纯:通过main.js把App.vue 渲染到index.html的指定区域中。
其中:
1)App.vue 用来编写待渲染的模板结构
2)index.html 中需要预留一个el区域
3)main.js 把App.vue渲染到了index.html所预留的区域中
我们来观察main.js文件

//导入vue这个包,得到Vue构造函数
import Vue from 'vue'
//导入App根组件,将来要把App.vue的模板结构渲染到HTML页面中
import App from './App.vue'

Vue.config.productionTip = false

//创建vue的实例对象
new Vue({
  // el:"#app",  //.$mount('#app')作用和el完全一样
  //把render函数指定的组件,渲染到HTML页面中,el指定的ui结构会替换render指定的结构
    render: h => h(App),
}).$mount('#app')

vue 实例的$mount方法作用和el一样。

举报

相关推荐

0 条评论