Vue脚手架的使用
Vue脚手架的使用及其功能实现
文章目录
- Vue脚手架的使用及其功能实现
- 1.初始化脚手架
- 1.1 文档
- 1.2 具体步骤
- 1.3 分析脚手架结构
- 模板项目结构
- 关于不同版本的Vue
- ``index.html``
- ``main.js``
- 组件
- 2.``render``函数
1.初始化脚手架
1.1 文档
https://cli.vuejs.org/zh/
or Vue官网-学习-Vue-CLi
1.2 具体步骤
win+R 打开cmd
如果出现'npm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。 请安装Nodejs
-
配置淘宝镜像 （否则下载缓慢）
npm config set registry https://registry.npm.taobao.org
-
（仅第一次执行）：全局安装
@vue/clinpm install -g @vue/cli- 安装后关掉页面重新打开，输入
vue检查是否安装成功
-
切换到创建项目的目录下，创建项目
-
例：切换到桌面
cd Desktop将目录切换到桌面mkdir demo新建文件夹demo 检查是否已经切换到桌面 -
vue create demo
运用
vue的哪个版本labelES6->ES5语法转换eslint语法检查
-
Succesfully代表成功创建
-
启动项目
npm run serve
搭建好了内置的小服务器
-
Ctrl+点击打开，用vue开发者工具检查（没有的浏览器安装vue插件） -
运行项目
- 将创建好的文件夹用
vscode打开 - 运行则终端
(ctrl+`)输入npm run serve ctrl+c停止运行
- 将创建好的文件夹用
1.3 分析脚手架结构
模板项目结构
-
favico.ico-> 页签图标 -
index.html-> 主页面 -
assets-> 存放静态资源 -
components-> 存放组件 -
App.vue-> 汇总所有组件 -
main.js-> 入口文件 -
.gitignore-> git版本管制忽略的文件 -
package.json-> 应用包控制文件 -
babel.config.js->babel配置文件 -
package-lock.json-> 包版本控制文件 -
README.md应用描述文件
关于不同版本的Vue
- vue.js与vue.runtime.xxx.js的区别:
（1） vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器 - 因为vue.runtime.xxx.js没有模板解析器，所有（main.js中）不能使用
template配置项，需要使用render函数接受到的createElement函数去指定具体内容。
index.html
DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %>title>head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>noscript><div id="app">div>body>
html>
main.js
/*该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue的实例对象---vm
new Vue({//将App功能放入容器中render: h => h(App),
}).$mount('#app')
组件
App.vue放src文件夹
其他组件放components文件夹
-
如果
Vue报错Component name “xxxx“ should always be multi-word- 解决办法
- 修改组件名字，组件名字总是由多个单词组成
- 将默认开启的语法检测关闭
-
将默认开启的语法检测关闭
在项目目录里面找到vue.config.js文件，在module.exports里面添加一行配置即可。
lintOnSave:false //关闭语法检查完整代码附上
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,lintOnSave:false })
2.render函数
Vue帮你调用render函数，传递了一个createElement函数，这个函数能够创建具体的元素
/*main.js文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'//引入残缺版的vue
//引入App组件，它是所有组件的父组件
//import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue的实例对象---vm
new Vue({//将App功能放入容器中render(createElement){return createElement('h1','你好啊');}//rende:createElement=>creatElement('h1','你好啊')// render: h => h(App),//简化为箭头函数//template:`你好啊
`,// components:{App}//报错
}).$mount('#app')
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！