vue入门学习知识要点总结(四),脚手架的使用与理解
程序员文章站
2022-06-06 21:36:59
...
接上一篇文章继续总结Vue的入门知识,这里主要是关于脚手架的使用和理解
脚手架
脚手架说明
- Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。可以帮助提高开发效率。
- 最新的版本是 4.x。
- 官方文档: https://cli.vuejs.org/zh/。
使用步骤
第一步(仅第一次执行):全局安装@vue/cli。(注:在cmd命令行下,需要安好node,下同)
npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目 (xxx为项目目录名称,应为英文路径)
vue create xxx
第三步:启动项目 (需要先进入项目路径下)
npm run serve
备注
- 如出现npm下载缓慢可配置淘宝镜像源:npm config set registry https://registry.npm.taobao.org
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置, 请执行:
vue inspect > output.js
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue 自定义的组件
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
关于不同版本的Vue
1.vue.js与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
//main.js文件是整个项目的入口文件,以下是他的配置
import Vue from 'vue' //引入Vue
import App from './App.vue' //引入App组件,它是所有组件的父组件
Vue.config.productionTip = false //关闭vue的生产提示
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了这个功能:将App组件放入容器中
render: h => h(App),
//template:`<App></App>`,
//components:{App},
})
本文参考了vue官方文档和脚手架文档及尚硅谷张天禹老师的vue教程及资料。
欢迎交流
上一篇: 做到四点 提高刮痧疗效
下一篇: 谷粒商城-vue模板内容