“Vue 脚手架结构”的版本间的差异
跳到导航
跳到搜索
验证“执行完
Jihongchang（讨论 | 贡献） |
Jihongchang（讨论 | 贡献） |
||
| 第58行： | 第58行： | ||
| | | | ||
|} | |} | ||
| − | + | ||
| + | ====验证“执行完 <code>npm run serve</code> 之后，就会运行 main.js”==== | ||
| + | 把 main.js 里的代码暂时注释，替换成：<syntaxhighlight lang="javascript"> | ||
| + | /* | ||
| + | import Vue from 'vue' | ||
| + | import App from './App.vue' | ||
| + | |||
| + | Vue.config.productionTip = false | ||
| + | |||
| + | new Vue({ | ||
| + | render: h => h(App), | ||
| + | }).$mount('#app') | ||
| + | */ | ||
| + | |||
| + | console.log("Hello World!"); | ||
| + | </syntaxhighlight>运行 <code>npm run serve</code>，观察浏览器控制台输出。 | ||
2024年8月11日 (日) 01:12的版本
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62
| → node_modules | ||
| → public | ||
| ↓ src | ||
| → assets | ||
| → components | ||
| App.vue | ||
| main.js | npm run serve 运行之后，就会去运行 main.js | |
| .gitignore | git 的忽略文件 | |
| babel.config.js | babel 的配置文件，ES6=>ES5 配置 | |
| package-lock.json | 包版本控制文件，锁定用到的包的版本 | |
| package.json | NPM 包说明文件，配置包名、版本、依赖、常用命令 | |
| scripts.serve | 开发过程中，运行 npm run serve，实际执行的就是这里的命令，脚手架会配置好服务器 | |
| scripts.build | 代码写完、开发完成之后，.vue => .html、.css、.js，这是最后的一次编译 | |
| scripts.lint | 几乎不用，对代码进行语法检查，很少执行，因为IDE、如 VS Code 有很好的语法检查插件，会在开发时帮开发者检查 | |
| README.md | 教程、笔记 |
验证“执行完 npm run serve 之后，就会运行 main.js”
把 main.js 里的代码暂时注释，替换成：
/*
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
*/
console.log("Hello World!");
运行 npm run serve，观察浏览器控制台输出。