從零到一詳聊創(chuàng)建Vue工程及遇到的常見問(wèn)題-創(chuàng)新互聯(lián)

準(zhǔn)備工作

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、紫云網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、紫云網(wǎng)絡(luò)營(yíng)銷、紫云企業(yè)策劃、紫云品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供紫云建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

1.判斷是否需要FQ或安裝鏡像，鏡像一般可安裝國(guó)內(nèi)淘寶鏡像，詳情可看這里：cnpm

npm install -g cnpm --registry="cnpm"全局安裝淘寶cnpm。

2.開發(fā)工具選擇很多，VUE無(wú)專用開發(fā)工具，開發(fā)項(xiàng)目多以SPA形式體現(xiàn)，本例使用 Visual Studio Code。

3.調(diào)試工具選擇很多，官方推薦 vue-devtools 。

安裝方法：FQ或者github主頁(yè)。https://github.com/vuejs/vue-devtools下載壓縮包，解壓到Chrome擴(kuò)展程序。

環(huán)境搭建

1.安裝 Node.js 10.15.3, npm包管理工具（高版本node.js自帶npm）。

安裝完成后，DOS命令行輸入命令檢查安裝情況npm -v,出現(xiàn)npm版本號(hào)即可。

下載地址https://nodejs.org/en/download/

2.全局安裝 vue-cli腳手架

DOS命令行安裝(-g 參數(shù)表示安裝至 npm 工作路徑,以后任意位置均可訪問(wèn))

npm install -g vue-cli

3.安裝開發(fā)工具 Visual Studio Code

1.下載地址 https://code.visualstudio.com/Download

注意 User Installer / System Installer 不同（建議安裝系統(tǒng)版本）

2.安裝 Vetur ,vue 2 snippets插件

文件 -> 選項(xiàng) -> 擴(kuò)展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝

3.安裝語(yǔ)言包（視個(gè)人喜好）

文件 -> 選項(xiàng) -> 擴(kuò)展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝

4.打開文件夾... 開發(fā)已存在項(xiàng)目

4.安裝 vue-devtools。

1.下載 https://github.com/vuejs/vue-devtools

2.DOS 命令進(jìn)入解壓后目錄

修改 \shells\chrome\manifest.json中 background 節(jié)點(diǎn) persistent 值為 true

3.運(yùn)行 npm install 命令安裝依賴包。

進(jìn)度條等待完成，大約5-15分鐘，必要使用cnpm

4.運(yùn)行 npm run build(一定要執(zhí)行這步，不然后面會(huì)報(bào)錯(cuò))

5.啟動(dòng) Google Chrome -> 輸入 chrome://extensions/ -〉確認(rèn)打開“開發(fā)者模式” -> 加載已解壓擴(kuò)展程序 -> 選擇 shells\chrome 確定即可安裝

初始化項(xiàng)目

初始化項(xiàng)目有多種方式，建議采用 Webpack 模板模式

1.進(jìn)入需要?jiǎng)?chuàng)建Vue項(xiàng)目文件夾，打開DOS命令行輸入：vue init webpack 項(xiàng)目名稱

2.然后終端會(huì)出現(xiàn)下圖“一問(wèn)一答”模式

“Project name”：這個(gè)是項(xiàng)目名稱，默認(rèn)是輸入時(shí)的那個(gè)名稱，想改的話直接輸入修改，也可以直接回車

“Install vue-router”:是否需要vue-router，這里默認(rèn)選擇使用，這樣生成好的項(xiàng)目就會(huì)有相關(guān)的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，剛才說(shuō)了我們這個(gè)項(xiàng)目需要使用所以也是直接回車，默認(rèn)使用，這樣會(huì)生成相關(guān)的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測(cè)試。由于我們現(xiàn)在還沒(méi)有單元測(cè)試，所以這里選擇的是”N”

“Setup e2e tests with Nightwatch”：是否安裝e2e測(cè)試，這里我也同樣選擇的是“N”

3.下載依賴包

cd ‘項(xiàng)目文件' 終端執(zhí)行命令：npm install .這個(gè)過(guò)程會(huì)生成一個(gè)node_modules 文件夾

4.調(diào)試項(xiàng)目

終端輸入：npm run dev/start

5.打開Google Chrome ,默認(rèn)項(xiàng)目地址:localhost://8080,訪問(wèn)即可。F12啟用開發(fā)者調(diào)試工具，調(diào)試菜單欄選擇 Vue

開發(fā)過(guò)程

1.相關(guān)文件說(shuō)明

build和config >webpack配置相關(guān)文件

node_modules>項(xiàng)目需要的模板文件

src/main.js>入口js文件

src/assets>公共的樣式，圖片文件

src/components>各種vue組件文件

src/App.vue>頁(yè)面主組件

src/router>vue-router 路由配置文件

static>靜態(tài)資源文件（不會(huì)被webpack處理）

.eslintrc.js>eslint檢查配置文件

.editorconfig>代碼編輯環(huán)境配置文件

.eslintignore>eslint檢查忽略文件

.babelrc>babel編譯參數(shù)配置文件

index.html>主頁(yè)，項(xiàng)目入口文件

package.json>項(xiàng)目配置文件，描述項(xiàng)目信息和依賴

README.md>項(xiàng)目的說(shuō)明文檔

2.新增組件

在 \src\components 目錄新建 vue 文件(每一個(gè).vue文件都是一個(gè)單獨(dú)vue組件，用來(lái)實(shí)現(xiàn)頁(yè)面特定的功能界面，包括基本的骨架html+CSS+js)。例如 Hellovue.vue，vue文件代碼標(biāo)準(zhǔn)模板樣式如下：

  <template>
    <div id="...">
      組件html模板
    </div>
    </template>

    <style>
      css相關(guān)樣式
    </style>

    <script>
    export default { //默認(rèn)向外暴露一個(gè)對(duì)象
      name:'Hellovue',
      data () {
        return {};// data保存數(shù)據(jù)必須返回一個(gè)對(duì)象
      }
    };
    </script>

當(dāng)前名稱：從零到一詳聊創(chuàng)建Vue工程及遇到的常見問(wèn)題-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://muchs.cn/article8/deieip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容