11-Vue脚手架 淡淡的烟草味﹌ 2024-05-03 14:34 12阅读 0赞 ![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center] #### 文章目录 #### * 前言 * 一、Vue脚手架 * 二、初始化的工程结构 ## 前言 ## > ?前言? > ?博客:【无聊大侠hello word】? > ✍有一点思考,有一点想法,有一点理性!✍ > ✍本文由在下【无聊大侠hello word】原创,首发于CSDN✍ ## 一、Vue脚手架 ## Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。 Vue脚手架的最新版本是4.x,这个版本和项目使用的Vue版本无关。 全局安装脚手架: npm install -g @vue/cli 创建项目: 使用脚手架创建项目: vue create xxxxx 选择要使用的VUE版本; ![在这里插入图片描述][28fe020a120f4cc7a0ab0bde9312d0f0.png] 启动项目: npm run serve 使用vue脚手架创建的项目,默认带了一个helloworld组件。 其他指令: # 打包编译 npm run build # 语法检查 npm run lint ## 二、初始化的工程结构 ## 工程文件夹结构: * public * favicon.ico:网页的页签图标 * index.html:html页面 * @node\_modules * src * main.js:整个项目的入口文件 * App.vue:App组件,所有其他组件的父组件 * assets:静态资源文件夹 * components:组件文件夹 * .gitignore:git的忽略文件 * babel.config.js:babel的控制文件,配置es6转换成es5的转换规则 * package-lock.json:指定包的版本、资源url * package.json:包的说明书 文件说明: main.js:该文件是整个项目的入口文件 // 引入vue import Vue from 'vue' // 引入App组件,它是所有组件的父组件 import App from './App.vue' // 关闭vue的生产提示 Vue.config.productionTip = false // 创建Vue实例对象 new Vue({ // 将App组件放入容器中 render: h => h(App), }).$mount('#app') // index.html的id=app的dom作为容器 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"> <!-- 配置页签图标 --> <!-- BASE_URL 会指向public文件夹 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页标题 --> <!-- 使用webpack的插件,该表达式会去找package.json中的name配置 --> <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> **先赞后看,养成习惯!!!^ \_ ^ ❤️ ❤️ ❤️ 码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!** [e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/99979f8173894aa581c22a8bd11f3154.gif [28fe020a120f4cc7a0ab0bde9312d0f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/5a99af5e0a3743419bff5d1a3807e20f.png
还没有评论,来说两句吧...