关于Vue脚手架
一、简介与安装
1 简介
Vue Cli 全称Vue command line interface(Vue命令行接口)，俗称Vue脚手架， 是Vue官方提供的一个标准化开发工具(开发平台)。 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
参考官网：Vue CLI
最新版本是4.x，目前处于维护模式
其优点
1. 开箱即用，零配置 2. 内置babel等工具 3. 标准化的webpack配置
2 安装脚手架
第一步：验证npm指令是否存在
如果不存在，需要安装nodejs软件 官网：https://nodejs.org/en
第二步：更换镜像
npm config set registry https://registry.npmmirror.com or npm config set registry htps://registry.npm.taobao.org
扩展：
查看是否更换成功 ： npm config get registry
删除最新镜像： npm config delete registry
第三步：安装脚手架(全局安装，只需要安装一次)
npm install -g @vue/cli # OR yarn global add @vue/cli
第四步：测试是否安装成功，检查一下版本号
vue -V 或者 vue --version
二、Vue项目创建与解析
1 如何创建Vue项目
第一步: 选择项目要创建的位置
比如在D:盘的一个文件夹projects里，那么cmd当前位置，需要切入该文件夹里
第二步：创建项目，想好自己的项目名称，比如first_vue
第三步: 按照提示来
错误总结
第一个：java_home
第二个：Error: spawn yarn ENOENT
打开 C盘 ， 在 C盘 里，打开 users （用户名）的文件夹，然后在右侧搜索名为 .vuerc 的文件
{
"useTaobaoRegistry": false,
"packageManager": "npm"
}
2 项目相关指令
启动项目：npm run serve 暂停项目：Ctril+C
3 脚手架组织结构解析
脚手架文件结构：
.文件目录 ├── node_modules: vue库文件以及第三方库文件 ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── components: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ └── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ，可以自行参考babel官网 ├── package-lock.json: 包版本控制文件 ├── package.json: 应用包配置文件 └── README.md: 应用描述文件
三、入门案例
src/components/School1.vue
<template>
<ul class="schoolUl">
<li>学校名称：{{schoolName1}}</li>
<ul>
<li>学校地址：{{schoolAddress1}}</li>
</ul>
</ul>
</template>
<script>
export default {
name:"School1",
data(){
return {
schoolName1:"吉林大学",
schoolAddress1:"高新区前进大街2699号"
}
}
}
</script>
<style>
.schoolUl{
list-style-type:lower-alpha;
}
</style>
src/components/School2.vue:
<template>
<ul class="schoolUl">
<li>学校名称：{{schoolName2}}</li>
<ul>
<li>学校地址：{{schoolAddress2}}</li>
</ul>
</ul>
</template>
<script>
export default {
name:"School2",
data(){
return {
schoolName2:"北京大学",
schoolAddress2:"海淀区颐和园路5号"
}
}
}
</script>
<style>
.schoolUl{
list-style-type:lower-alpha;
}
</style>
src\components\City.vue:
<template>
<ul>
<li>{{cityName1}}
<School1></School1>
</li>
<li>{{cityName2}}
<School2></School2>
</li>
</ul>
</template><script>
import School1 from './School1.vue'
import School2 from './School2.vue';
export default {
name:"City",
data(){
return {
cityName1:"长春市",
cityName2:"北京市"
}
},
components:{
School1,
School2
}
}
</script><style>
</style>
src/App.vue
<template>
<div id="app">
<City></City>
</div>
</template>
<script>
import City from './components/City.vue'
export default {
name: 'App',
components: {
City
}
}
</script>
<style>
</style>
src/main.js:
/*
该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
//引入App组件，他是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
//Vue.config.productionTip = false
new Vue({
// 简写形式 将App组件放入容器中
render: h => h(App),
// 完整形式
// render(createElement){
// return createElement(App)
// }
}).$mount('#app')
public/index.html:
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 --> <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> <!-- 当浏览器不支持js时，里面的元素内容就被渲染 --> <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>
小贴士：常用快捷键：控制台打开的快捷键： ctrl+`
四、render函数
按照以前的写法，我们应该这样写:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:"#app"
template: `<App></App>`
});
但是会报如下错误：
因为vue项目，默认引用的是node_modules\vue\dist\vue.runtime.esm.js，在node_modules\vue\package.json中明晃晃的写着：模块化语法时，引用的是该js
vue.js 与 vue.runtime.xxx.js的区别：
1. vue.js 是完整版的 Vue，包含：核心功能+模板解析器 2. vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容
render(a){
//console.log(typeof a) // Function, 该函数就是用来创建DOM节点的
return a('h1','你好，欢迎来到我的家');
}
//简写：
render:h => h(h1)
自己定义一个用于创建节点的函数，你应该会这么定义：
function createNode(nodeName,content){
var node = document.createElement(nodeName);
var txt = document.createTextNode(content)
node.appendChild(txt)
return node;
}
五、配置文件
vue.config.js 是一个可选的配置文件，如果项目的（和package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
使用vue.config.js 可以对脚手架进行个性化定制，详见配置 参考官网：配置参考 | Vue CLI
module.exports = {
pages: {
index: {
// 入口
entry: 'src/index/main.js'
}
},
// 关闭语法检查
lintOnSave:false
}