Vue專案初始
阿新 • • 發佈：2018-11-13
安裝
第一步:下載node
第1.5步: npm安裝可能無法下載
| 1 |
npm install
-
g cnpm
-
-
registry
=
http:
/
/
registry.npm.taobao.org |
使用淘寶cnpm
第二步:使用node的包管理器npm安裝vue,可以忽略
| 1 |
npm install vue
|
第三步安裝腳手架
| 1 2 |
npm install --global vue-cli
//--global的意思為全域性安裝
|
通過npm init 建立package.json
- 在自己建立的一個工程目錄下開啟cmd ,在裡面輸入命令npm init
- 按提示，一步步來完成專案檔案的配置，沒有的可以不寫，直接enter,這樣初始化時會建立預設的檔案
- 或者使用 --yes 預設建立
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{
"name"
:
"luffy"
,
"description"
:
"A Vue.js project"
,
"version"
:
"1.0.0"
,
"author"
: "",
"license"
:
"MIT"
,
"private"
: true,
"scripts"
: {
"dev"
:
"cross-env NODE_ENV=development webpack-dev-server --open --hot"
,
"build"
:
"cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies"
: {
# 這就是專案依賴的外掛及版本
"marked"
:
"^0.3.19"
,
"vue"
:
"^2.5.11"
},
"browserslist"
: [
"> 1%"
,
"last 2 versions"
,
"not ie <= 8"
],
"devDependencies"
: {
"babel-core"
:
"^6.26.0"
,
"babel-loader"
:
"^7.1.2"
,
"babel-preset-env"
:
"^1.6.0"
,
"babel-preset-stage-3"
:
"^6.24.1"
,
"cross-env"
:
"^5.0.5"
,
"css-loader"
:
"^0.28.7"
,
"file-loader"
:
"^1.1.4"
,
"vue-loader"
:
"^13.0.5"
,
"vue-template-compiler"
:
"^2.4.4"
,
"webpack"
:
"^3.6.0"
,
"webpack-dev-server"
:
"^2.9.1"
}
}
|
為專案新增外掛
| 1 2 3 4 5 6 7 |
# 切換到專案目錄下
# 為專案新增bootstrap而不是為全域性新增
npm install bootstrap
-
-
save
# 移除bootstrap的依賴
npm uninstall bootstrap
-
-
save
# 指定版本,會使用這個版本的最高版本
npm install [email protected]
3
-
-
save
|
獲取專案依賴的外掛
| 1 2 |
# 專案目錄下
npm install
# 下載專案依賴的外掛
|
建立基於webpack模板的新專案
黃色圈圈部分是可選模式
建立專案
| 1 |
vue init webpack my
-
project
# vue init 模式 專案名
|
然後下面給出了提示資訊
| 1 2 3 |
cd my
-
project
# 切換進專案目錄
npm install
# 安裝依賴
npm run dev
# 執行專案
|
