【Vue2】Vue-Cli使用

 

1、需要NodeJS环境支持，此处省略NodeJS安装

2、使用NPM命令安装CLI包

vue-cli是npm.上的一个全局包，使用npm install 命令,即可方便的把它安装到自己的电脑上:

npm install -g @vue/cli

命令输出：

C:\Users\Administrator>npm install -g @vue/cli
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
npm WARN deprecated subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
C:\Users\Administrator\AppData\Roaming\npm\vue -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

> core-js-pure@3.22.3 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/protobufjs@1.2.2 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall

npm WARN node-fetch@2.6.7 requires a peer of encoding@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.5.7 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

+ @vue/cli@5.0.4
added 883 packages from 531 contributors in 49.297s

C:\Users\Administrator>

 

3、使用CLI命令创建项目

指定项目名称（demo-first）：

vue create demo-first

 

选择初始化模板种类：

这里选择手动配置

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys) -- 使用方向键进行选择
  Default ([Vue 3] babel, eslint) -- Vue3 项目 配置ESlint 和Babel加载器
  Default ([Vue 2] babel, eslint) -- Vue2 项目 配置ESlint 和Babel加载器
> Manually select features -- 手动选择特性

 

选择需要安装的组件和插件支持

勾选Babel加载器和CSS预处理器

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: 
(
  Press <space> to select,  -- 按空格选中
  <a> to toggle all,  -- 按A全选
  <i> to invert selection,  -- 按i反选
  and <enter> to proceed -- 按回车执行
)
>(*) Babel  -- Babel加载器
 ( ) TypeScript -- TS脚本
 ( ) Progressive Web App (PWA) Support -- 渐进式WEB框架
 ( ) Router -- Vue路由配置
 ( ) Vuex -- Vue叉 集中缓存配置
 (*) CSS Pre-processors -- CSS样式预处理器 LESS、SASS
 ( ) Linter / Formatter -- 语法限制
 ( ) Unit Testing -- 单元测试
 ( ) E2E Testing --  E2E测试

 

版本选择单独拎出来了，这里选择Vue2版本

 ? Choose a version of Vue.js that you want to start the project with 
  3.x
> 2.x

 

CSS预处理器的选择：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

 

配置文件的管理方式选择：

选择独立配置文件，不要选择集中在package.json中管理

一个组件对应一个配置文件

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files -- 独立配置文件
  In package.json -- 统一在package.json

　

最后是否保存上述选择作为一个自定义创建模板

方便下次创建时使用

# 是否保存这些预设作为创建模板？
? Save this as a preset for future projects? (y/N)

　

保存时指定模板名称：

# 保存命名：
? Save preset as:

 

依赖构建工具选择：

YARN或者NPM，这里选择NPM

# 依赖构建选择哪种工具， Yarn, NPM
选择NPM, 然后自动下载依赖
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM

 

构建完成时输出：

# 项目构建完成
Vue CLI v5.0.4
✨  Creating project in G:\frontend-note\Stage6 Vue\demo-first.
⚙️  Installing CLI plugins. This might take a while...


> core-js@3.22.3 postinstall G:\frontend-note\Stage6 Vue\demo-first\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

added 829 packages from 460 contributors in 85.615s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 17 packages from 15 contributors in 6.856s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo-first.
👉  Get started with the following commands:

 $ cd demo-first
 $ npm run serve

PS G:\frontend-note\Stage6 Vue> 

　

创建成功会提示如何运行这个项目模板：

🎉  Successfully created project demo-first.
👉  Get started with the following commands:

 $ cd demo-first
 $ npm run serve

 

模板目录结构：

Name
----
node_modules - 构建依赖
public
    - favor.ico 标签 logo
    - index.html 首页
src - 源码目录
    - assets文件夹:存放项目中用到的静态资源文件，例如: ess样式表、图片资源
    - components文件夹: 程序员封装的、可复用的组件，都要放到components目录下
    - main.js是项目的入口文件。整个项目的运行，要先执行main.js
    - App.vue是项目的根组件。
.browserslistrc
.gitignore
babel.config.js
jsconfig.json
package-lock.json
package.json
README.md
vue.config.js

　

在工程化的项目中，vue要做的事情很单纯:

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