環境搭建

- 安裝node

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

- 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安裝腳手架

cnpm install -g @vue/cli


- 清空快取處理

npm cache clean --force

專案建立

Terminal下建立專案

1.建立新的專案

注：需要提前進入目標目錄(專案應該建立在哪個目錄下)

vue create 專案名  # 創建出一個vue專案

2.選擇自定義方式建立專案，選取Router, Vuex外掛

3.選擇需要的相對應的內容

在圖形化介面中建立專案

除了直接在命令列中建立專案外，也可以在vue提供的圖形化介面中建立。
首先需要執行以下命令進入影象化介面：

vue ui

圖形化介面首頁如下

選擇專案名和包管理器

選擇模板

選擇完成後等待專案建立完成即可。

專案啟動

使用Pycharm啟動vue

在Pycharm中啟動vue專案，需要在Pycharm中安裝一個vue外掛。
在Pycharm中點選File->settings->Plugins，在Marketplace中搜索vue.js外掛，並點選install進行安裝。

在安裝完成後需要重新啟動Pycharm外掛才能生效。

1.可以在Pycharm中為專案配置一個啟動按鈕

2.也可以在terminal下啟動專案

在terminal執行以下命令即可啟動：

npm run serve

打包專案

我們需要在專案根目錄下進行打包操作,執行命令如下：

npm run build

package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 執行專案
    "build": "vue-cli-service build",  # 編譯專案成html，css，js
    "lint": "vue-cli-service lint"     # 程式碼格式化
},
 

專案目錄

myfirstvue  # 專案名
	-node_modules # 該專案所有的依賴，如果要把專案給別人，這個資料夾要刪掉（很大）

	-public # 資料夾
		-favicon.ico #小圖示
		-index.html  # 整個vue專案的index.html,單頁面開發

	-src    # 核心
		-store # 如果裝了vuex，就會有這個資料夾
		-router #如果裝了vue router ，就會有這個資料夾
		-assets # 存放資原始檔（js，css，img）
		-components # 小元件（在這寫小元件）
		-views      #頁面元件（在這寫頁面元件）
		main.js     # 整個專案的入口，核心配置
		App.vue     # 根元件

	-package.json # 專案的依賴，不能刪
	-README.md    # 介紹

vue元件下載

npm install 元件名 -S