Vue2/Vue3

修改 node 更新源

  • 将默认的 更新源修改为 淘宝的 下载地址
PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.org
PS C:\Users\Administrator> npm config get registry
https://registry.npm.taobao.org/
安装
npm install -g @vue/cli
  • 一般 新版 Vue 脚手架不可以共存 所以如果有 旧版的脚手架 会提示你 需要卸载 原来的脚手架
  • 然后重新执行上面的安装
npm uninstall -g vue-cli
  • 安装好之后 就可以去初始化项目了
  • 值得一提的是我在官方的文档中找到了一个 在使用新版脚手架时仍然可以 创建旧版的 项目 创建的命令不变 但是 需要执行一下 以下 命令
npm install -g @vue/cli-init
  • 这是一个桥接工具
创建项目
  • 在安装好脚手架之后 就可以去初始化 新版的 项目了
vue create 'project_name' # project_name 用对应的项目名字替换
  • 和 旧版本的命令一样 按下回车键之后 就会创建一个 和项目名称一样的文件夹
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) # vue 3 
  Default ([Vue 2] babel, eslint) # vue 2 这两个默认是没有 Vue-Router 等一系列常用的 moudel 的 所以一般选择第三个
  Manually select features #  手动选择 自定义 选择 需要的插件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

* Choose Vue version ： vue的版本
* Babel：是否需要babel
* Typescript：是否需要ts
* Progressive Web App (PWA) Support：渐进式Web应用（PWA）支持
* Router： vue路由
* Vuex：vue状态管理器
* CSS Pre-processors：CSS预处理器（比如less、sass）
* Linter / Formatter：代码风格检查和格式化
* Unit Testing：单元测试
* E2E Testing：E2E测试
  • 就是我这个有点奇怪 别人都有 手动 选择 vue 的版本 的这个选项 而我没有 有可能是 我选的太晚了 被迭代掉了这个 选项
  • 选择完成之后就是这个样子
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)    
> 3.x
  2.x
  • 然后它又提示我选择 Vue 版本 这里选择 Vue 3.x
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N) N # 是否使用 es6 的语法 来创建 Vue 的组件 果断选择 N
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 是否使用历史记录模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  # 选择 一下 CSS 预处理器
  Sass/SCSS (with dart-sass)
> Less # 简单点选择 Less 
  Stylus
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) # 这些配置 是分开写在每个配置文件中 还是 统一写在 package.json 中
> In dedicated config files
  In package.json
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) # 是否保存我们当前的选择 这里选择 No 这里英文的意思 是否 保存当前的配置 在未来的项目中使用
  • 配置完成之后就会去自动的 创建整个项目
Vue CLI v5.0.8
✨  Creating project in E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin.
⚙️  Installing CLI plugins. This might take a while...


added 852 packages in 2m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 34 packages in 17s
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd vue_systemfacesignin
 $ npm run serve

PS E:\java\idea_java_maven\SystemFacesignin> 

PS E:\java\idea_java_maven\SystemFacesignin> cd vue_systemfacesignin # 进入到项目的根目录中
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm install # 安装一下 项目依赖
up to date in 14s
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm run serve

> vue_systemfacesignin@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 10626ms                                                                                                                      23:23:36

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.

安装 Element

PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> vue add element-plus
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-element-plus...


added 1 package in 16s
✔  Successfully installed plugin: vue-cli-plugin-element-plus

? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? Yes
? Choose the locale you want to load, the default locale is English (en) zh-cn

🚀  Invoking generator for vue-cli-plugin-element-plus...
📦  Installing additional dependencies...


added 14 packages in 38s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin>

Vue 新版 脚手架 初始化 笔记

Vue2/Vue3

修改 node 更新源

  • 将默认的 更新源修改为 淘宝的 下载地址
PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.org
PS C:\Users\Administrator> npm config get registry
https://registry.npm.taobao.org/
安装
npm install -g @vue/cli
  • 一般 新版 Vue 脚手架不可以共存 所以如果有 旧版的脚手架 会提示你 需要卸载 原来的脚手架
  • 然后重新执行上面的安装
npm uninstall -g vue-cli
  • 安装好之后 就可以去初始化项目了
  • 值得一提的是我在官方的文档中找到了一个 在使用新版脚手架时仍然可以 创建旧版的 项目 创建的命令不变 但是 需要执行一下 以下 命令
npm install -g @vue/cli-init
  • 这是一个桥接工具
创建项目
  • 在安装好脚手架之后 就可以去初始化 新版的 项目了
vue create 'project_name' # project_name 用对应的项目名字替换
  • 和 旧版本的命令一样 按下回车键之后 就会创建一个 和项目名称一样的文件夹
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) # vue 3 
  Default ([Vue 2] babel, eslint) # vue 2 这两个默认是没有 Vue-Router 等一系列常用的 moudel 的 所以一般选择第三个
  Manually select features #  手动选择 自定义 选择 需要的插件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

* Choose Vue version ： vue的版本
* Babel：是否需要babel
* Typescript：是否需要ts
* Progressive Web App (PWA) Support：渐进式Web应用（PWA）支持
* Router： vue路由
* Vuex：vue状态管理器
* CSS Pre-processors：CSS预处理器（比如less、sass）
* Linter / Formatter：代码风格检查和格式化
* Unit Testing：单元测试
* E2E Testing：E2E测试
  • 就是我这个有点奇怪 别人都有 手动 选择 vue 的版本 的这个选项 而我没有 有可能是 我选的太晚了 被迭代掉了这个 选项
  • 选择完成之后就是这个样子
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)    
> 3.x
  2.x
  • 然后它又提示我选择 Vue 版本 这里选择 Vue 3.x
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N) N # 是否使用 es6 的语法 来创建 Vue 的组件 果断选择 N
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 是否使用历史记录模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  # 选择 一下 CSS 预处理器
  Sass/SCSS (with dart-sass)
> Less # 简单点选择 Less 
  Stylus
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) # 这些配置 是分开写在每个配置文件中 还是 统一写在 package.json 中
> In dedicated config files
  In package.json
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) # 是否保存我们当前的选择 这里选择 No 这里英文的意思 是否 保存当前的配置 在未来的项目中使用
  • 配置完成之后就会去自动的 创建整个项目
Vue CLI v5.0.8
✨  Creating project in E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin.
⚙️  Installing CLI plugins. This might take a while...


added 852 packages in 2m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 34 packages in 17s
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd vue_systemfacesignin
 $ npm run serve

PS E:\java\idea_java_maven\SystemFacesignin> 

PS E:\java\idea_java_maven\SystemFacesignin> cd vue_systemfacesignin # 进入到项目的根目录中
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm install # 安装一下 项目依赖
up to date in 14s
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm run serve

> vue_systemfacesignin@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 10626ms                                                                                                                      23:23:36

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.

安装 Element

PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> vue add element-plus
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-element-plus...


added 1 package in 16s
✔  Successfully installed plugin: vue-cli-plugin-element-plus

? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? Yes
? Choose the locale you want to load, the default locale is English (en) zh-cn

🚀  Invoking generator for vue-cli-plugin-element-plus...
📦  Installing additional dependencies...


added 14 packages in 38s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin>
# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue