1. Vue CLI理解
1.1 什么是Vue CLI
1.2 Vue CLI使用前提 - Node & Webpack
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install [name]
npm install webpack -g
1.3 安装Vue脚手架
//Vue CLI2
npm install -g vue-cli
//Vue ClI3
npm install -g @vue/cli
1.4 初始化项目
//Vue CLI2
vue init webpack my-project
//Vue CLI3
vue create my-project
2. Vue CLI2详解
2.1 初始化设置
2.2 Runtime-Compiler和Runtime-only的区别
new Vue({
el: '#app',components: { App },template: '<App/>'
})
new Vue({
el: '#app',render: h => h(App)
})
//组件对象
const cpn = {
template: '<div>{{message}},我是cpn组件</div>',data() {
return {
message:'hello'
}
}
}
//这里传来的实参名字叫createElement，而模板生成使用形参h去接收，为什么要取名h？
new Vue({
el: '#app',render: (createElement) => {
//1.使用方式一:我们这里创建出来的element就会替换#app元素
// return createElement('标签','相关数据对象（可以不传），即标签的属性',['内容数组']);
//1.1 render函数基本使用
// return createElement('div',{class: 'box'},['polaris']);
//1.2 嵌套render函数
// return createElement('div',[
// 'polaris',createElement('h2',['我是标题啊'])
// ]);
//1.3 传入一个组件对象,注意这里的cpn组件需要template编译器
return createElement(cpn);
}
})
2.3 目录结构
2.4 npm run build流程
2.5 npm run dev流程
2.6 修改配置：webpack.base.conf.js起别名
resolve: {
extensions: ['.js','.vue','.json'],alias: {
'@': resolve('src'),'pages': resolve('src/pages'),'common': resolve('src/common'),'components': resolve('src/components'),'network': resolve('src/network'),}
}
3. Vue CLI3详解
- vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“ 0配置”，移除了配置文件根目录下的build和config等目录
- vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
import Vue from 'vue'
import App from './App.vue'
//生产阶段打印的一些提示信息，在开发阶段一般不需要即设为false
Vue.config.productionTip = false
//两种不同的写法异同 ↓
new Vue({
//el与下面的.$mount('#app')没有区别
//vue底层只是多了一行代码，即如果配置了el则获取el的值去执行.$mount('得到的值')
//即不管有没有el，最终都会执行.$mount('xx')
el: '#app'
render: function(h) {
return h(App)
}
})
new Vue({
render: h => h(App),}).$mount('#app')
服务热线 19970861797
