【Vue2】Vue-Cli使用

 

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

2、使用NPM命令安装CLI包

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

?

1	npm install -g @vue/cli

命令输出：

?

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 35 36 37

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）：

?

1	vue create demo-first

 

选择初始化模板种类：

这里选择手动配置

?

1 2 3 4 5

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预处理器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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版本

?

1 2 3

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

 

CSS预处理器的选择：

?

1 2 3 4

? 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中管理

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

?

1 2 3

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

　

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

方便下次创建时使用

?

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

　

保存时指定模板名称：

?

1 2	# 保存命名： ? Save preset as:

 

依赖构建工具选择：

YARN或者NPM，这里选择NPM

?

1 2 3 4 5

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

 

构建完成时输出：

?

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

# 项目构建完成 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>

　

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

?

1 2 3 4 5

🎉  Successfully created project demo-first. 👉  Get started with the following commands:    $ cd demo-first  $ npm run serve

 

模板目录结构：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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的指定区域中。