1、創(chuàng)建項目

1.1、命令格式：vue create 項目名稱

vue create vue3_example001

1.2、運行項目

npm run serve

1.2.1、增加run命令

啟動時想修改命令，例如：

npm run dev

1、找到項目根路徑下的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、修改啟動默認端口

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

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"}

修改后再次運行項目，端口號就變更為：81

1.2.1.2、修改啟動命令

在運行項目時追加端口號

npm run serve -- --port 81

1.2.1.3、修改vue.config.js文件

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

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

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

2.1、 目錄說明

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

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>