vue创建项目

环境准备：
查看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项目。

1. 打开命令窗口(所在目录将会是你创建项目的目录)

WeChatb634791b9831af1493b06a1ff41e5c7d.png

2. 执行创建项目命令行(erabbit-pc-vue-project项目名)

   
   
   WeChat50dd81b21ab9ca54ce08da4cc5ea2ed0.png

3. 选择自定义创建

   
   
   WeChatab3f374b476f46d62dbbe4db5a4e971d.png

4. 选中vue-router,vuex,css Pre-processors选项

   
   
   WeChatd17a561f1b67e682da2fb003709fbfd6.png

5. 选择vue3.0版本

   
   
   WeChatd643194b9e13958a8ddb1fc01729ddc8.png

6. 选择hash模式的路由

   
   
   WeChat3ece70a3357160fd54d66cea8dec540c.png

7. 选择less作为预处理器

   
   
   WeChat75fc5a36301a6830bdbd71a0495f57f6.png

8. 选择 standard 标准代码风格

   
   
   WeChat86fbc054f8f57817d9d2f0b97f05dae9.png

9. 保存代码校验代码风格，代码提交时候校验代码风格

   
   
   WeChatf4fac2269e9a755fe2389b7ad6ff5e39.png

10. 依赖插件或者工具的配置文件分文件保存

    
    
    WeChat5b09098d2c204be4d62946ad942e772c.png

11. 是否记录以上操作，选择否

    
    
    WeChatc8e1cf9f46345217c73a21a79297a00e.png

12. 等待安装...

    
    
    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