环境准备：
查看node版本
$ node -v
查看npm版本
$ npm -v
查看git安装版本
$ git --version
查看镜像地址
$ npm config get registry
设置淘宝镜像地址
$ npm config set registry https;//registry.npm.taobao.ort/
创建项目：使用vue-cli创建一个vue3.0项目。
- 打开命令窗口(所在目录将会是你创建项目的目录)
-
执行创建项目命令行(erabbit-pc-vue-project项目名)
WeChat50dd81b21ab9ca54ce08da4cc5ea2ed0.png -
选择自定义创建
WeChatab3f374b476f46d62dbbe4db5a4e971d.png -
选中vue-router,vuex,css Pre-processors选项
WeChatd17a561f1b67e682da2fb003709fbfd6.png -
选择vue3.0版本
WeChatd643194b9e13958a8ddb1fc01729ddc8.png -
选择hash模式的路由
WeChat3ece70a3357160fd54d66cea8dec540c.png -
选择less作为预处理器
WeChat75fc5a36301a6830bdbd71a0495f57f6.png -
选择 standard 标准代码风格
WeChat86fbc054f8f57817d9d2f0b97f05dae9.png -
保存代码校验代码风格，代码提交时候校验代码风格
WeChatf4fac2269e9a755fe2389b7ad6ff5e39.png -
依赖插件或者工具的配置文件分文件保存
WeChat5b09098d2c204be4d62946ad942e772c.png -
是否记录以上操作，选择否
WeChatc8e1cf9f46345217c73a21a79297a00e.png -
等待安装...
WeChat4a809d6d312780a7f26d794df6411b3b.png
13.最后：安装完毕
WeChat33c353aeb8643baf52e38ce07aafafa4.png
vscode插件
vetur、eslint
eslint配置：xcode设置(左下角齿轮图标)-->打开设置(右上角图标)-->粘贴代码
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
配置脚手架
终端操作：
// 全局安装@vue/cli模块包
$ npm global add @vue/cli
//查看是否成功（有版本号输出就是成功了）
$ vue -V
// 创建项目（vuecli-demo是项目名）
$ vue create vuecli-demo
// 选择项目目录
$ cd vuecli-demo
// 打开服务
$ npm run serve
移除vant组件库
$ npm remove vant
Babel
Router
Vuex
CSS Pre-processoers
Linter/Formatter
谷歌浏览器插件：vue.js devtools // 调试vue
// 使用npm的问题
由于项目依赖版本不一致，需要命令后加--legacy-peer-deps
$ npm install vue-router@4 --legacy-peer-deps
项目安装vant后报错：
error:0308010C:digital envelope routines::unsupported
出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.
目前可以通过运行以下命令行临时解决这个问题：
$ export NODE_OPTIONS=--openssl-legacy-provider
