网站建设定制开发Vue 新版 脚手架 初始化 笔记

Vue2/Vue3

修改 node 更新源

  • 将默认的 网站建设定制开发更新源修改为 淘宝的 下载地址
PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.orgPS C:\Users\Administrator> npm config get registryhttps://registry.npm.taobao.org/
  • 1
  • 2
  • 3
  • 4

安装

npm install -g @vue/cli 
  • 1
  • 一般 新版 Vue 网站建设定制开发脚手架不可以共存 网站建设定制开发所以如果有 网站建设定制开发旧版的脚手架 会提示你 需要卸载 网站建设定制开发原来的脚手架
  • 网站建设定制开发然后重新执行上面的安装
npm uninstall -g vue-cli
  • 1
  • 网站建设定制开发安装好之后 就可以去初始化项目了
  • 值得一提的是我在官方的文档中找到了一个 在使用新版脚手架时仍然可以 创建旧版的 项目 创建的命令不变 但是 需要执行一下 以下 命令
npm install -g @vue/cli-init
  • 1
  • 这是一个桥接工具

创建项目

  • 在安装好脚手架之后 就可以去初始化 新版的 项目了
vue create 'project_name' # project_name 用对应的项目名字替换
  • 1
  • 和 旧版本的命令一样 按下回车键之后 就会创建一个 和项目名称一样的文件夹
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 #  手动选择 自定义 选择 需要的插件
  • 1
  • 2
  • 3
  • 4
  • 5
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
* 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测试
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 就是我这个有点奇怪 别人都有 手动 选择 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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 然后它又提示我选择 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 这里英文的意思 是否 保存当前的配置 在未来的项目中使用 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 配置完成之后就会去自动的 创建整个项目
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 servePS E:\java\idea_java_maven\SystemFacesignin> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
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 14sPS 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.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

安装 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-plusPS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
  • 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 新版 脚手架 初始化 笔记

Vue2/Vue3

修改 node 更新源

  • 将默认的 更新源修改为 淘宝的 下载地址
PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.orgPS C:\Users\Administrator> npm config get registryhttps://registry.npm.taobao.org/
  • 1
  • 2
  • 3
  • 4

安装

npm install -g @vue/cli 
  • 1
  • 一般 新版 Vue 脚手架不可以共存 所以如果有 旧版的脚手架 会提示你 需要卸载 原来的脚手架
  • 然后重新执行上面的安装
npm uninstall -g vue-cli
  • 1
  • 安装好之后 就可以去初始化项目了
  • 值得一提的是我在官方的文档中找到了一个 在使用新版脚手架时仍然可以 创建旧版的 项目 创建的命令不变 但是 需要执行一下 以下 命令
npm install -g @vue/cli-init
  • 1
  • 这是一个桥接工具

创建项目

  • 在安装好脚手架之后 就可以去初始化 新版的 项目了
vue create 'project_name' # project_name 用对应的项目名字替换
  • 1
  • 和 旧版本的命令一样 按下回车键之后 就会创建一个 和项目名称一样的文件夹
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 #  手动选择 自定义 选择 需要的插件
  • 1
  • 2
  • 3
  • 4
  • 5
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
* 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测试
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 就是我这个有点奇怪 别人都有 手动 选择 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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 然后它又提示我选择 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 这里英文的意思 是否 保存当前的配置 在未来的项目中使用 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 配置完成之后就会去自动的 创建整个项目
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 servePS E:\java\idea_java_maven\SystemFacesignin> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
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 14sPS 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.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

安装 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-plusPS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
  • 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
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发