投稿

web前端：vue-cli3后图形化UI界面创建项目深度剖析

Vedu • • 界面设计 • 阅读 1297

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    

          .
2021/03/10  09:14    

          ..
               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
web前端：vue-cli3后图形化UI界面创建项目深度剖析

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

. 2021/03/10 09:17.. 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” }

web前端：vue-cli3后图形化UI界面创建项目深度剖析

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
web前端：vue-cli3后图形化UI界面创建项目深度剖析

router安装

web前端：vue-cli3后图形化UI界面创建项目深度剖析

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    

          .
2021/03/10  09:14    

          ..
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    

          base-css
2021/02/21  10:19    

          base-js
2021/02/23  20:03    

          css
2021/02/21  10:00    

          img
2021/02/22  11:04               835 index.html
2021/02/23  19:56    

          js
2021/02/24  13:10    

          vue-cli
2021/03/09  09:48    

          vue-cli-nav
2021/03/10  09:33    

          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    

          .
2021/03/10  10:41    

          ..
2021/03/10  10:41    

          node_modules
               0 个文件              0 字节
               3 个目录 94,647,451,648 可用字节
web前端：vue-cli3后图形化UI界面创建项目深度剖析

npm初始化

web前端：vue-cli3后图形化UI界面创建项目深度剖析

生成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    

          .
2021/03/10  10:46    

          ..
2021/03/10  10:52    

          node_modules
2021/03/10  10:52               328 package.json
               1 个文件            328 字节
               3 个目录 94,627,291,136 可用字节
web前端：vue-cli3后图形化UI界面创建项目深度剖析

安装eslint和router

3.vue-cli3卸载-安装（指定版本）

区别
Vue-cli2 Vue-cli3（提供了图形界面，运行速度下降）
vue-cli @vue/cli
卸载 npm uninstall vue-cli -g 或者 npm uni vue-cli -g
安装 npm install @vue/cli -g 或者 cnpm install @vue/cli -g
启动图形化UI界面 npm ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

4.Vue ui图形化界面创建项目

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

5.默认模式创建：babel和eslint

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

6.手动模式创建

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-ui

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-ui

7.Dashboard仪表盘（首页）

web前端：vue-cli3后图形化UI界面创建项目深度剖析

dashboard仪表盘

8.插件安装页

web前端：vue-cli3后图形化UI界面创建项目深度剖析

插件页

9.依赖安装页

web前端：vue-cli3后图形化UI界面创建项目深度剖析

依赖页

10.项目配置页

web前端：vue-cli3后图形化UI界面创建项目深度剖析

配置页

11.项目运行页serve

web前端：vue-cli3后图形化UI界面创建项目深度剖析

运行serve

web前端：vue-cli3后图形化UI界面创建项目深度剖析

启动serve

web前端：vue-cli3后图形化UI界面创建项目深度剖析

输出路径

web前端：vue-cli3后图形化UI界面创建项目深度剖析

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区别

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue-cli2和cli3之后区别

14.Vue-cli文件索引源码解析

web前端：vue-cli3后图形化UI界面创建项目深度剖析

vue文件组件索引解析

15.Index.html引入bootstrap，vue-cli3默认配置了<%= BASE_URL %>在public下

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="<%=%20BASE_URL%20%>base/css/base.css" />
    <link rel="stylesheet" href="<%=%20BASE_URL%20%>base/css/bootstrap.min.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>
    
  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页面组件配置图解

web前端：vue-cli3后图形化UI界面创建项目深度剖析

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>
web前端：vue-cli3后图形化UI界面创建项目深度剖析

自定义组件

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/21839.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-03-11 07:32
下一篇 2021-03-12 07:35

相关推荐

发表评论

登录后才能评论