安装
第一步:下载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 bootstrap@
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
# 运行项目
|
