在程序開發中，有三種方式創建vue項目，本地引入vuejs、使用cdn引入vuejs、使用vue-cli創建vue項目。其中vue-cli可以結合webpack打包工具使用，大大方便了開發步驟，使用廣泛。

一、vue本地引用

在官網下載vue.js，通過script標簽引入。
開發版本：https://vuejs.org/js/vue.js 包含完整的警告和調試模式
生產版本：https://vuejs.org/js/vue.min.js 刪除了警告，30.90KB min+gzip
注意：在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告！ vue.min.js，這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。

二、通過cdn方法引用

unpkg：
https://unpkg.com/vue@2.6.12/dist/vue.js
會保持和 npm 發布的最新的版本一致。（推薦使用）

BootCDN（國內）國內不穩定
https://cdn.bootcss.com/vue/2.2.2/vue.min.js

三、NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

一、安裝node.js
1、在官網中安裝nodejs最新版本。地址：https://nodejs.org/en/download/，根據自己環境，進行下載安裝。

2、安裝完成后，進行nodejs版本及npm版本查看。

打開cmd命令行，輸入 node -v 和 npm -v，node安裝后將會自動安裝上npm，但不一定是最新的，可用命令 npm install -g npm，進行最新版本安裝。

安裝好之后，就可以使用vue-cli進行初始化一個vue項目。

二、vue項目初始化
使用淘寶NPM 鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安裝 vue-cli
cnpm install vue-cli -g

查看vue-cli是否安裝成功
vue list

選定路徑
cd C:\Users\Administrator\Desktop\vueproject

新建vue項目
vue init webpack 項目名
（按照提示信息，進行創建項目，一般默認直接選擇yes）

打開項目目錄：會看到vue的一個初始化結構

build——項目構建(webpack)相關代碼。

config——基本配置信息，如端口等，此處初學我們可以默認。

node_modules——npm加載的項目依賴模塊。

src——最重要的開發目錄，包含：assets（放置一些圖片，如logo等）、 components（ 組件文件夾）、App.vue（ 項目入口文件）、main.js:（項目的核心文件）

static——靜態資源目錄。在打包發布后將用于存放靜態資源。

test——初始測試目錄，可以刪除。

index.html ——首頁入口文件。

package.json ——項目配置文件，此處初學我們可以默認。

.xxxx文件 ——一些配置文件，包括語法配置，git配置等，此處初學我們可以默認。

README.md 檔，為markdown 格式 。

|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
| |-- data // 群聊分析得到的數據用于數據可視化
|-- .babelrc // ES6語法編譯配置,里面有一些插件，這些插件的作用是代碼的轉換
|-- .editorconfig // 編譯器的配置,定義代碼格式
|-- .eslintignore //忽略語法檢查的目錄文件
|-- .eslintrc.js //編譯規則配置文件，規則定制文件，規則編譯不過的時候可以在這里配置為0
|-- .gitignore // git上傳需要忽略的文件格式,
|-- favicon.ico // link圖標
|–.postcssrc.js
|-- index.html // 入口頁面
|-- package.json // 項目基本信息如：可以配置script腳本 ^上箭頭代表可以安裝當前版本及以上的版本
|-- README.md // 項目說明

三，啟動運行項目

進入項目根目錄，運行命令：npm run dev

瀏覽器：http://localhost:8080/

解決vue不能自動打開瀏覽器的問題：打開config ==> index.js 配置中找到autoOpenBrowswe,默認設置的是false,然后改為true就可以了

總結

以上是生活随笔為你收集整理的vue的使用（引用/创建vue项目）（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。