VUE学习(十二)、vue脚手架的使用
一、安装vue-cli
1、配置淘宝镜像
配置淘宝镜像防止有时候安装脚手架网络卡顿
npm config set registry https://registry.npm.taobao.org
2、全局安装@vue/cli
npm install -g @vue/cli
3、创建一个项目
vue create hello-world
(vue版本、语法转换、语法检查)
4、启动项目
npm run serve
访问生成地址即可
5、也可使用vue ui命令实现可视化创建
6、main.js文件
/*
该文件是整个项目的入口文件
*/
// 引入vue,此处引入的是一个残缺版本的vue,要引入原生的如下:"vue/dist/vue.js"
import Vue from "vue";
// 引入App组件,它是所有组件的父组件
import App from "./App.vue";
// 关闭vue生产提示
Vue.config.productionTip = false;
// 创建Vue实例对象----vm
new Vue({
el: "#app",
// 使用残缺版是因为 vue 中三分之一都是模板解析器,但是当项目打包以后不再需要模板解析,所以进行精简
// 将App组件放入容器中,当使用残缺版本的vue.js时必须用render,否则不能解析模板
// render: (h) => h(App),
// render原生写法
render: function (createElement) {
// createElement类型为一个函数
console.log(typeof createElement);
//return createElement("h1", "你好啊");
return createElement(App);
}
// -----------------简写演变-----------
/*
// 去除定义方法关键字
render(createElement) {
return createElement(App)
}
// 写成箭头函数
render:(createElement) =>{
return createElement(App)
}
// 去除箭头函数括号
render:createElement =>{
return createElement(App)
}
// 箭头函数只有一句函数体且有返回值
render:createElement => createElement(App)
*/
}); //.$mount("#app");
/*
关于不同版本的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函数去指定具体内容。
*/
7、默认不能更改的配置(也有更改的方法)
①、public文件夹
②、src文件夹
③、main.js文件
8、更改不能改的默认配置vue.config.js
修改(添加)vue.congfig.js配置文件后必须关闭项目重新启动
module.exports = {
pages: {
index: {
//入口
entry: 'src/main.js',
},
},
lintOnSave:false, //关闭语法检查
}
更多配置可查官网
脚手架文件结构
├── 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
- vue.js与vue.runtime.xxx.js的区别:
- vue.js是完整版的Vue,包含:核心功能 + 模板解析器。
- vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
- 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。
vue.config.js配置文件
- 在终端使用vue inspect > output.js可以查看到Vue脚手架的默认配置(使默认配置显示在项目中,但是并不能更改–更改无效)。
- 使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh