网站建设手机app,南昌网站制作公司,网站优化主要内容,定制衣服app软件哪个好1.认识脚手架结构
使用VSCode将vue项目打开#xff1a; package.json#xff1a;包的说明书#xff08;包的名字#xff0c;包的版本#xff0c;依赖哪些库#xff09;。该文件里有webpack的短命令#xff1a;
serve#xff08;启动内置服务器#xff09;
build命令…1.认识脚手架结构
使用VSCode将vue项目打开 package.json包的说明书包的名字包的版本依赖哪些库。该文件里有webpack的短命令
serve启动内置服务器
build命令是最后一次的编译生成html css js给后端人员
lint做语法检查的。
2.分析HelloWorld程序 1、index.html
!DOCTYPE html
html lang
head
meta charsetutf-8 /
!-- 让IE浏览器启用最高渲染标准。IE8是不支持Vue的。 --
meta http-equivX-UA-Compatible contentIEedge /
!-- 开启移动端虚拟窗口理想视口 --
meta nameviewport contentwidthdevice-width,initial-scale1.0 /
!-- 设置页签图标 --
link relicon href% BASE_URL %favicon.ico /
!-- 设置标题 --
title欢迎使用本系统/title
/head
body
!-- 当浏览器不支持JS语言的时候显示如下的提示信息。 --
noscript
strongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong
/noscript
!-- 容器 --
div idapp/div
!-- built files will be auto injected --
/body
/html
在index.html文件中 没有看到引入vue.js文件。 也没有看到引入main.js文件。Vue脚手架会自动找到main.js文件。不需要你手动引入。 所以main.js文件的名字不要随便修改main.js文件的位置不要随便动。 2、main.js
// 等同于引入vue.js
import Vue from vue
// 导入根组件
import App from ./App.vue
// 关闭生产提示信息
Vue.config.productionTip false
// 创建Vue实例
new Vue({
render: h h(App),
}).$mount(#app)
3、es语法检测。 如果用单字母表示组件的名字会报错名字应该由多单词组成。 解决这个问题有两种方案 第一种把所有组件的名字修改一下。 第二种在vue.config.js文件中进行脚手架的默认配置。配置如下 const { defineConfig } require(vue/cli-service)
module.exports defineConfig({
transpileDependencies: true
// 保存时是否进行语法检查。true表示检查false表示不检查。默认值是true。
lintOnSave : false,
// 配置入口
pages: {
index: {
entry: src/main.js,
}
},
})
3.脚手架默认配置
脚手架默认配置在vue.config.js文件中进行。
main.js、index.html等都是可以配置的。
配置项可以参考Vue CLI官网手册如下
// vue.config.js const { defineConfig } require(vue/cli-service);
module.exports defineConfig({ transpileDependencies: true, // 保存时是否进行语法检查。true表示检查false表示不检查。默认值是true。 lintOnSave: false, // 配置入口 pages: { index: { entry: src/main.js, }, }, });
