【Vue.JS】vue-cli

Nephilim 2023-01-20

Tips：一些记录，一些笔记

2023/1/20

FRIDAY

人生还是稍微有点难的，

你要做好准备，

「加油」能解决的问题，... 不多。

—— 李诞（脱口秀）

单页面应用程序（Single Page Application）

单页面应用程序（Single Page Application），指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都是在这唯一的一个页面中完成的。

vue-cli

vue-cli是Vue.JS开发的标准工具，它简化了程序员基于Webpack创建工程化的Vue项目的过程。

vue-cli官方网站：https://cli.vuejs.org/zh/

官方网站对该工具的定位的介绍：

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
https://cli.vuejs.org/zh/guide/

在Vue.JS 2.x的时候，vue-cli是比较常见的，但是现在Vue.JS 3.x官方主推的工具是【create-vue】，这个工具也是后面会做笔记记录与学习的，当前，我们先掌握vue-cli。

官方网站对于vue-cli现状的描述：

⚠️ Vue CLI 现已处于维护模式!
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南以了解最新的工具推荐。
https://cli.vuejs.org/zh/guide/

vue-cli：安装

vue-li是npm上的一个全局包，使用npm install命令就可以安装：

npm install -g @vue/cli

装好后，就可以通过npm list查看到了：

adamhuan@AdamhuandeMacBook-Pro vue.js % npm list
adamhuan@ Users/adamhuan
├── @graphql-tools/utils@9.1.1 extraneous
├── @types/express@4.17.1
├── @types/jasmine@2.8.0
├── @types/lodash@4.14.191
├── @types/mocha@10.0.0
├── @types/react-dom@17.0.1
├── @vue/cli-init@5.0.8
├── @vue/cli@5.0.8
├── ajax@0.0.4
├── axios@1.2.0
├── vue@3.2.36
├── webpack-cli@5.0.0
└── webpack@5.75.0


adamhuan@AdamhuandeMacBook-Pro vue.js %

也可以查看到安装的vue-cli的版本号：

adamhuan@AdamhuandeMacBook-Pro vue.js % vue -V 
@vue/cli 5.0.8
adamhuan@AdamhuandeMacBook-Pro vue.js %

vue-cli：快速生成工程化的Vue项目

语法：

vue create 项目名称

通过vue-cli创建项目的样例：

其中：

Babel（必选）	为Webpack提供高级JS语言支持
TypeScript	微软开发的脚本语言，比JavaScript强大
Progressive Web App(PWA) Support	渐进式网页应用支持
Router	路由
Vuex
CSS Pre-processors	CSS预处理器： less sass scss stylus
Linter Formatter	约束团队中代码开发规范的插件
Unit Testing	单元测试
E2E Testing

这里先选择【Vue.JS 2.x】的版本。

各自的配置文件，独立记录。

vue-cli：是否将上面的选择存下来，以便于未来项目的创建

设置存储的文件的名称。

vue-cli：开始创建。

如上所示，最终创建成功。

进入项目看看：

adamhuan@AdamhuandeMacBook-Pro vue.js % vue create 09_vuejs_by_cli




Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by 
default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config 
files
? Save this as a preset for future projects? Yes
? Save preset as: vue-cli-template-20230120


🎉  Preset vue-cli-template-20230120 saved in Users/adamhuan/.vuerc




Vue CLI v5.0.8
✨  Creating project in Users/adamhuan/adamhuan_data/learning_data/vue.js/09_vuejs_by_cli.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...




added 837 packages in 11s
🚀  Invoking generators...
📦  Installing additional dependencies...




added 20 packages in 2s
⚓  Running completion hooks...


📄  Generating README.md...


🎉  Successfully created project 09_vuejs_by_cli.
👉  Get started with the following commands:


 $ cd 09_vuejs_by_cli
 $ npm run serve


adamhuan@AdamhuandeMacBook-Pro vue.js % 
adamhuan@AdamhuandeMacBook-Pro vue.js % pwd 
/Users/adamhuan/adamhuan_data/learning_data/vue.js
adamhuan@AdamhuandeMacBook-Pro vue.js % 
adamhuan@AdamhuandeMacBook-Pro vue.js % ls -ltr
total 0
drwxrwxrwx  10 adamhuan  staff  320  1 13 14:35 01_webpack_example_line_with_diff_color
drwxr-xr-x   3 adamhuan  staff   96  1 13 23:48 02_vuejs_helloworld
drwxr-xr-x   7 adamhuan  staff  224  1 15 17:15 03_vuejs_directives
drwxr-xr-x   3 adamhuan  staff   96  1 16 23:14 04_example_综合案例_1.html
drwxr-xr-x   4 adamhuan  staff  128  1 17 10:32 static
drwxr-xr-x   3 adamhuan  staff   96  1 17 21:12 05_vuejs_过滤器
drwxr-xr-x   3 adamhuan  staff   96  1 19 10:37 06_vuejs_侦听器
drwxr-xr-x   3 adamhuan  staff   96  1 19 19:48 07_vuejs_计算属性
drwxr-xr-x   3 adamhuan  staff   96  1 19 23:31 08_axios
drwxr-xr-x   7 adamhuan  staff  224  1 20 13:12 venv
drwxr-xr-x  14 adamhuan  staff  448  1 20 16:25 09_vuejs_by_cli
adamhuan@AdamhuandeMacBook-Pro vue.js % 
adamhuan@AdamhuandeMacBook-Pro vue.js % cd 09_vuejs_by_cli 
adamhuan@AdamhuandeMacBook-Pro 09_vuejs_by_cli % 
adamhuan@AdamhuandeMacBook-Pro 09_vuejs_by_cli % ls -ltr
total 1424
-rw-r--r--    1 adamhuan  staff      73  1 20 16:25 babel.config.js
-rw-r--r--    1 adamhuan  staff     118  1 20 16:25 vue.config.js
-rw-r--r--    1 adamhuan  staff     279  1 20 16:25 jsconfig.json
drwxr-xr-x    4 adamhuan  staff     128  1 20 16:25 public
drwxr-xr-x    6 adamhuan  staff     192  1 20 16:25 src
-rw-r--r--    1 adamhuan  staff     430  1 20 16:25 package.json
drwxr-xr-x  527 adamhuan  staff   16864  1 20 16:25 node_modules
-rw-r--r--    1 adamhuan  staff  704583  1 20 16:25 package-lock.json
-rw-r--r--    1 adamhuan  staff     279  1 20 16:25 README.md
adamhuan@AdamhuandeMacBook-Pro 09_vuejs_by_cli %

按照之前终端中的提示，运行这个项目：

npm run serve

可以看到，项目已经运行起来了。

在浏览器中访问：http://localhost:8080/

可以看到，该项目成功运行起来了。

项目结构

node_modules	NPM安装的模块包的路径
public/favicon.ico	网站的页面的图标
public/index.html	单页面应用程序的唯一的HTML页面
src	源码目录
src/assets	存放项目中用到的静态资源文件： css样式表图片资源
src/components	程序员封装的，可复用的组件，都要放在该目录下‍
src/main.js	项目的入口文件，整个项目的运行，要先执行main.js
src/App.vue	项目的根组件
.gitignore	GIT上传的时候，忽略哪些文件或文件夹
babel.config.js	Babel的配置文件
package.json	项目中用到的包的配置文件

Vue.JS项目的运行流程

在工程化的项目中，Vue要做的事情：

通过main.js，把App.vue渲染到index.html中的指定区域中。

文件：main.js

// 导入 Vue 包，得到 Vue 构造函数
import Vue from 'vue'


// 导入 App.vue 根组件
// 将来需要将 App.vue 中的模板结构渲染到HTML页面中
import App from './App.vue'


Vue.config.productionTip = false




// 创建 Vue 实例对象
new Vue({
  // 把 render 函数指定的组件，渲染到HTML页面中
  render: h => h(App),
}).$mount('#app') // 定义 Vue 控制的HTML区域

文件：index.html

Vue会用xxxx.vue中的模板结构（template）替换掉index.html中的【<div id="app"></div>】

例如

新建一个组件文件：src/Leviathan.vue

修改：main.js

// 导入 Vue 包，得到 Vue 构造函数
import Vue from 'vue'


// 导入 App.vue 根组件
// 将来需要将 App.vue 中的模板结构渲染到HTML页面中
import App from './App.vue'


import Leviathan from './Leviathan.vue'


Vue.config.productionTip = false




// 创建 Vue 实例对象
new Vue({
  // 把 render 函数指定的组件，渲染到HTML页面中
  render: h => h(Leviathan),
}).$mount('#app') // 定义 Vue 控制的HTML区域

然后，在浏览器中看看页面上的变化：

可以看到原来index.html中的【div id="app"】的已经被替换掉了。

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【Vue.JS】vue-cli

评论