1、創(chuàng)建項(xiàng)目

1.1、命令格式：vue create 項(xiàng)目名稱

vue create vue3_example001

1.2、運(yùn)行項(xiàng)目

npm run serve

1.2.1、增加run命令

啟動(dòng)時(shí)想修改命令，例如：

npm run dev

1、找到項(xiàng)目根路徑下的package.json文件；
2、找到【scripts】數(shù)據(jù)

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"}

修改后：

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","dev": "vue-cli-service serve"}

1.2.1、修改啟動(dòng)默認(rèn)端口

總結(jié)：優(yōu)先級(jí)：方法一>方法二=方法三>方法四
如果方法二和方法三同時(shí)使用，且端口號(hào)設(shè)置不同，就會(huì)報(bào)錯(cuò)

1.2.1.1、修改package.json文件

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","dev": "vue-cli-service serve --port 81"}

修改后再次運(yùn)行項(xiàng)目，端口號(hào)就變更為：81

1.2.1.2、修改啟動(dòng)命令

在運(yùn)行項(xiàng)目時(shí)追加端口號(hào)

npm run serve -- --port 81

1.2.1.3、修改vue.config.js文件

在根目錄下創(chuàng)建vue.config.js文件（和package.json同一目錄）

module.exports = {devServer:{port:8090, // 啟動(dòng)端口號(hào)open:true  // 啟動(dòng)后是否自動(dòng)打開網(wǎng)頁(yè)}
}

2、目錄結(jié)構(gòu)

2.1、 目錄說(shuō)明

目錄/文件	說(shuō)明
build	項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
config	配置目錄，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的。
node_modules	npm 加載的項(xiàng)目依賴模塊
src	這里是我們要開發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件： 1、assets: 放置一些圖片，如logo等。2、components: 目錄里面放了一個(gè)組件文件，可以不用。3、App.vue: 項(xiàng)目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。 4、main.js: 項(xiàng)目的核心文件。5、index.css: 樣式文件。
static	靜態(tài)資源目錄，如圖片、字體等。
public	公共資源目錄。
test	初始測(cè)試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語(yǔ)法配置，git配置等。
index.html	首頁(yè)入口文件，你可以添加一些 meta 信息或統(tǒng)計(jì)代碼啥的。package.json
README.md	項(xiàng)目的說(shuō)明文檔，markdown 格式
dist	使用npm run build命令打包后會(huì)生成該目錄。

2.2、Vue源碼

查看Vue工程下面的src/App.vue

<!--模板展示-->
<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template><!--Vue代碼-->
<script>
// 引入組件
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>
<!--定義樣式-->
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>