1.项目初始化-手动自定义安装
| 安装依赖 | npm install 或者 cnpm install |
| 初始化项目 | npm init -f 或者 cnpm init -f （-f自动安装模式，全部默认，包括工程名等...） |
| 安装模板组件 | npm install vue-router --save-dev 或者 npm install vue-router -D（生产/开发环境 -D = --save-dev） |
2.1 npm初始化
Microsoft Windows [版本 10.0.18363.1379]
(c) 2019 Microsoft Corporation。保留所有权利。
D:\DEV_CODE\html_code\base-vue>md vue-cli3-nav ##创建项目目录
D:\DEV_CODE\html_code\base-vue>cd vue-cli3-nav ##进入目录
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>dir ##查看目录详情
驱动器 D 中的卷是 APP_SOFT
卷的序列号是 BCA1-A4B1
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav 的目录
2021/03/10 09:14 <DIR> .
2021/03/10 09:14 <DIR> ..
0 个文件 0 字节
2 个目录 94,693,216,256 可用字节
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>npm install ##安装依赖
npm WARN saveError ENOENT: no such file or directory, open 'D:\DEV_CODE\html_code\base-vue\vue-cli3-nav\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\DEV_CODE\html_code\base-vue\vue-cli3-nav\package.json'
npm WARN vue-cli3-nav No description
npm WARN vue-cli3-nav No repository field.
npm WARN vue-cli3-nav No README data
npm WARN vue-cli3-nav No license field.
up to date in 1.051s
npm生成package.json
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>dir
驱动器 D 中的卷是 APP_SOFT
卷的序列号是 BCA1-A4B1
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav 的目录
2021/03/10 09:17 <DIR> .
2021/03/10 09:17 <DIR> ..
2021/03/10 09:17 27 package-lock.json
1 个文件 27 字节
2 个目录 94,693,212,160 可用字节
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>npm init -f ##初始化生成package.json（-f全部默认，包括name）
npm WARN using --force I sure hope you know what you are doing.
Wrote to D:\DEV_CODE\html_code\base-vue\vue-cli3-nav\package.json:
{
"name": "vue-cli3-nav",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
npm-初始化生成
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>npm install vue-router --save-dev ##安装开发/生产环境的router
npm WARN vue-cli3-nav@1.0.0 No description
npm WARN vue-cli3-nav@1.0.0 No repository field.
+ vue-router@3.5.1
added 1 package from 1 contributor in 0.44s
router安装
eslint安装
2.2 cnpm初始化
D:\DEV_CODE\html_code\base-vue\vue-cli3-nav>cd .. 返回上一级
D:\DEV_CODE\html_code\base-vue>dir 查看目录
驱动器 D 中的卷是 APP_SOFT
卷的序列号是 BCA1-A4B1
D:\DEV_CODE\html_code\base-vue 的目录
2021/03/10 09:14 <DIR> .
2021/03/10 09:14 <DIR> ..
2021/02/21 10:00 970 .project
2021/02/22 11:28 1,503 1-vue-base.html
2021/02/23 14:51 5,509 2-vue-bind.html
2021/02/23 16:46 1,889 3-vue-component.html
2021/02/23 22:14 1,950 4-vue-component-re.html
2021/02/21 10:17 <DIR> base-css
2021/02/21 10:19 <DIR> base-js
2021/02/23 20:03 <DIR> css
2021/02/21 10:00 <DIR> img
2021/02/22 11:04 835 index.html
2021/02/23 19:56 <DIR> js
2021/02/24 13:10 <DIR> vue-cli
2021/03/09 09:48 <DIR> vue-cli-nav
2021/03/10 09:33 <DIR> vue-cli3-nav
6 个文件 12,656 字节
10 个目录 94,647,451,648 可用字节
D:\DEV_CODE\html_code\base-vue>md vue-cli-cnpm ##创建vue-cli的安装目录
D:\DEV_CODE\html_code\base-vue>cd vue-cli-cnpm ##进入目录
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm>cnpm install
npminstall WARN package.json not exists: D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm\package.json
√ Installed 0 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 12ms(network 7ms), speed 0B/s, json 0(0B), tarball 0B)
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm>dir
驱动器 D 中的卷是 APP_SOFT
卷的序列号是 BCA1-A4B1
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm 的目录
2021/03/10 10:41 <DIR> .
2021/03/10 10:41 <DIR> ..
2021/03/10 10:41 <DIR> node_modules
0 个文件 0 字节
3 个目录 94,647,451,648 可用字节
npm初始化
生成package.json
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm>cnpm install vue-router -D ##安装生产/开发应用router
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 599ms(network 591ms), speed 250.47kB/s, json 1(18.12kB), tarball 129.91kB)
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm>cnpm i eslint -D ##安装eslint（i=install -D= --save-dev）
√ Installed 1 packages
√ Linked 97 latest versions
√ Run 0 scripts
Recently updated (since 2021-03-03): 4 packages (detail see file D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm\node_modules\.recently_updates.txt)
√ All packages installed (108 packages installed from npm registry, used 7s(network 7s), speed 476.3kB/s, json 98(244.76kB), tarball 2.92MB)
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm>dir 查看生成的文件
驱动器 D 中的卷是 APP_SOFT
卷的序列号是 BCA1-A4B1
D:\DEV_CODE\html_code\base-vue\vue-cli-cnpm 的目录
2021/03/10 10:46 <DIR> .
2021/03/10 10:46 <DIR> ..
2021/03/10 10:52 <DIR> node_modules
2021/03/10 10:52 328 package.json
1 个文件 328 字节
3 个目录 94,627,291,136 可用字节
安装eslint和router
3.vue-cli3卸载-安装（指定版本）
| 区别 |
| ||||
| 卸载 | npm uninstall vue-cli -g 或者 npm uni vue-cli -g | ||||
| 安装 | npm install @vue/cli -g 或者 cnpm install @vue/cli -g | ||||
| 启动图形化UI界面 | npm ui
 vue ui |
4.Vue ui图形化界面创建项目
vue ui
5.默认模式创建：babel和eslint
vue ui
vue ui
vue-ui
vue ui
6.手动模式创建
vue ui
vue-ui
vue ui
vue-ui
vue-ui
vue-ui
7.Dashboard仪表盘（首页）
dashboard仪表盘
8.插件安装页
插件页
9.依赖安装页
依赖页
10.项目配置页
配置页
11.项目运行页serve
运行serve
启动serve
输出路径
vue启动页面
12.vue-cli4命令行启动
| vue-cli2创建项目 | vue init webpack vue-cli-nav |
| Vue-cli3之后创建项目 | vue create {projectName} |
| Vue-cli3安装记录 | D:\DEV_CODE\html_code\base-vue>vue create vue-cli3-command ##创建项目 Vue CLI v4.4.6 ┌─────────────────────────────────────────────┐ │ │ │ New version available 4.4.6 → 4.5.11 │ │ Run yarn global add @vue/cli to update! │ │ │ └─────────────────────────────────────────────┘
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? Yes ? Save preset as: ##回车
Vue CLI v4.4.6 ✨ Creating project in D:\DEV_CODE\html_code\base-vue\vue-cli3-command. � Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... > core-js@3.9.1 postinstall D:\DEV_CODE\html_code\base-vue\vue-cli3-command\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > ejs@2.7.4 postinstall D:\DEV_CODE\html_code\base-vue\vue-cli3-command\node_modules\ejs > node ./postinstall.js added 1219 packages from 928 contributors in 119.231s 59 packages are looking for funding run `npm fund` for details � Invoking generators... � Installing additional dependencies... added 4 packages from 1 contributor in 5.054s 59 packages are looking for funding run `npm fund` for details ⚓ Running completion hooks... � Generating README.md... � Successfully created project vue-cli3-command. � Get started with the following commands:
$ cd vue-cli3-command $ npm run serve
D:\DEV_CODE\html_code\base-vue>cd vue-cli3-command 进入已创建的vue-cli3目录 D:\DEV_CODE\html_code\base-vue\vue-cli3-command>npm run serve 运行npm |
13.Vue-cli2 --》vue-cli3区别
vue-cli2和cli3之后区别
14.Vue-cli文件索引源码解析
vue文件组件索引解析
15.Index.html引入bootstrap，vue-cli3默认配置了<%= BASE_URL %>在public下
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>base/css/base.css" />
<link rel="stylesheet" href="<%= BASE_URL %>base/css/bootstrap.min.css" />
<!--<link rel="stylesheet" href="<%= BASE_URL %>base/css/" />-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script type="text/javascript" src="<%= BASE_URL %>base/js/jquery.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>base/js/bootstrap.min.js"></script>
</html>
16.Vue-cli3页面组件配置图解
vue-cli3之后的页面组件参数传递
17.CeventComp简单组件
<template>
<div>
<h1>作者：15400001771@qq.com </h1>
<button type="button" class="btn btn-primary">{{message}}</button>
</div>
</template>
<script>
export default {
name: "CeventComp",
data() {
return {
message: "时间：2021-03-10",
}
}
}
</script>
<style>
</style>
自定义组件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
