vue-前端快速开发

vue 快速教程

快速教程
视频教程===》熟悉基本的开发，否则会有很多初级的坑导致无法快速的使用。

Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了
[Vue3 项目从零开始搭建项目及插件的使用](Vue3 项目从零开始搭建项目及插件的使用)
vue-cli 是独立的脚手架工具：
如果是简单的使用，尽量按照官网直接去用，避免因为自己判断、操作太多的细节导致的问题浪费时间。
vuecli
cli
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

服务：
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

插件：
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。
cn-guide

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

element-plus 组件库

gitee-docs

idea配置

node.js
npm // 升级 npm install -g npm
npm install -g cnpm --registry=http://registry.npm.taobao.org //npm config set registry https://registry.npm.taobao.org 设置
cnpm install -g vue-cli //npm i -g vue-cli // 测试： vue -V
// 打包工具安装
cnpm install -g webpack

// 初始化项目
vue init webpack xxxx // 会自动创建项目包路径xxx
//idea 开发：“File” -->“Settings” --> “Plugins” ；idea配置启动项更改

npm run serve 或者ide运行

安装配置vue插件

Intellij IDEA 不能自动提示 element-ui 相关标签组件问题的解决
emmet语法api

问题

1. 安装vue-cli 会一直是2.9.6版本
   Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
   cnpm install vue@next // 安装最近稳定版本的vue包
   cnpm install -g @vue/cli // 全局安装命令行工具
   cnpm i -g @vue/cli-init // 安装初始化工具

2. 是否需要本地安装
   Local install (default): puts stuff in ./node_modules of the current package root.
   Global install (with -g): puts stuff in /usr/local or wherever node is installed.
   Install it locally if you’re going to require() it.
   Install it globally if you’re going to run it on the command line.
   If you need both, then install it in both places, or use npm link.

When the global flag is set, npm installs things into this prefix. When it is not set, it uses the root of the current package, or the current working directory if not in a package already.

3. npm run dev 运行时报错： npm ERR! xxx@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

删除node_moudles ， cnpm install -S 重建
4. element-plus的版本问题

npm install -g @vue/cli@3.0.4