1. 程式人生 > >構建vue項目

構建vue項目

package ejs 技術分享 鼠標 不能 code .com karma 代碼

1 安裝nodejs, 進入node官網

2 使用npm全局安裝vue-cli

npm i(install) vue-cli -g

3 新建一個文件夾,在該文件內打開命令窗口(在該文件shift+右擊鼠標 -> 在此處打開命令窗口)

使用命令創建項目

vue init webpack [項目名稱]

命令輸入之後,會出現以下信息

技術分享

Project name 註意:該項目名稱不能輸入中文

Project description 項目的描述

Author 作者

Vue build standalone

Install vue-router? 是否安裝vue-router

Use ESLint to lint your code? 是否使用ESLint管理代碼

ESLint是個代碼風格管理工具,用來避免低級錯誤和統一代碼的風格。(官網https://eslint.org/)

Pick an ESLint preset 選擇一個ESLint預設,代碼風格

Setup unit tests with Karma + Mocha? 是否安裝單元測試

Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e (端到端) 測試

技術分享

4 cd test進入該目錄

5 安裝依賴 npm install

可以安裝淘寶鏡像,打開命令行窗口,輸入

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

之後安裝依賴可以運行 cnpm i

6 開始運行 npm run dev 打開其鏈接地址就ok了

項目總體框架

技術分享

build ------------------------------------------------------- webpack相關配置

config -------------------------------------------------------- vue基本配置文件

src ------------------------------------------------------- 項目核心文件

static ------------------------------------------------------- 靜態資源

test ------------------------------------------------------- 單元測試

.babelrc ------------------------------------------------------- babel編譯參數

.editorconfig --------------------------------------------- 代碼格式

.eslintrc.js --------------------------------------------- ESLint配置參數的介紹

.gitignore --------------------------------------------- git上傳需要忽略的文件配置

.postcssrc.js --------------------------------------------- 轉換css的工具

index.html --------------------------------------------- 主頁

package.json --------------------------------------------- 項目基本信息

README.md --------------------------------------------- 項目說明

構建vue項目