前言
博客:【无聊大侠hello word】
✍有一点思考,有一点想法,有一点理性!✍
✍本文由在下【无聊大侠hello word】原创,首发于CSDN✍
Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。
Vue脚手架的最新版本是4.x,这个版本和项目使用的Vue版本无关。
全局安装脚手架:
npm install -g @vue/cli
创建项目:
使用脚手架创建项目:
vue create xxxxx
选择要使用的VUE版本;
启动项目:
npm run serve
使用vue脚手架创建的项目,默认带了一个helloworld组件。
其他指令:
# 打包编译
npm run build
# 语法检查
npm run lint
工程文件夹结构:
文件说明:
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">
<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>
<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>
body>
html>
先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!