按照vue官网使用 vue-cli 创建项目后，你会得到这样的项目文件及页面。
项目的创建
1. 创建前
- 你一定安装配置了nodejs，安装了vue-cli 脚手架。
2. 创建中 (参考官方文档)
- cmd 中
vue create demo - 选择
default(babel, eslint)，此选项为选择默认预设，也可选择手动设置。 cd demonpm run serve
3. 创建后
- 运行得到这样的页面
详解
1. 目录文件
2. 代码解释
- 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') //手动启动挂载未挂载的 Vue 实例
更多的了解 官网 vm.$mount()
- 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标签中的内容将会渲染 -->
<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>
<!-- built files will be auto injected -->
</body>
</html>
3. main.js 中的 render: h => h(App)
// 先不看render这个东西，按照原来的写法挂载vue实例
new Vue({
el:'#app',
template:`<App></App>`,
components:{App}, // 注册组件
})
当然了，这样在项目中肯定会报错
仔细看一下报错中的这三句话：
1. You are using the runtime-only build of Vue where the template compiler is not available. 【你正在使用运行时版本的vue，模板解析器是残缺的。】
-
去看一下引入的vue文件，
import Vue from 'vue'，进入到 node_modules / vue / dist 的文件中，会发现里面有许多 vue 文件。其中实际上只有 vue,js 是最原始最完整的vue，其它的vue文件都是经过各种修改的。 -
引入哪一个vue要看 node_modules / vue / package.json 文件中的 137 行
"module": "dist/vue.runtime.esm.js"。这行代码就是说：如果通过ES6的模块化语法去引入vue，那引入的就是 vue.runtime.esm.js。 -
所以默认生成的代码引入的vue是残缺版的。
-
再看下面错误提示告知的两种解决办法。
2. Either pre-compile the templates into render functions, 【把需要编译的模板交给render函数】
- 关于render函数，先写不简写的理解一下
new Vue({
el:'#app',
// 必须有 return
render(){
return null;
}
})
- render 函数是可以接受到参数的 （这个参数是个函数），官方文档中把参数叫做：createElement。
new Vue({
el:'#app',
// 使用。第一个参数是html的内置标签，第二个参数是内容
render(createElement){
return createElement('h1', 'hello');
}
// 简写
// render: h => h(App),
})
3. or use the compiler-included build.【或者使用编译器包含在里面的版本】
- 试一下引入完整版
import Vue from 'vue/dist/vue'，也是可以成功的。
966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
