Vscode+Pycharm+Vue.js+WEUI+Django火锅(二）vscode & Vue

差生文具多是被逼的。
既然Pycharm用不了，那就用vscode
1.下载vscode安装
https://code.visualstudio.com/

2.node.js下载后安装，类似.networkframework 和JDK的角色
安装后查看版本
PS C:\Users\Administrator> node -v
v22.9.0

3.node package manager的安装，这是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
安装node.js时默认是安装的，所以不用独立安装
npm -v 查看安装版本
PS C:\Users\Administrator> npm -v
10.8.3

4.安装vue/cli
PS C:\Users\Administrator> npm install -g @vue/cli
npm error code ECONNRESET
npm error syscall read
npm error errno ECONNRESET
npm error network request to https://registry.npmjs.org/@vue%2fcli failed, reason: read ECONNRESET
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly.  See: 'npm help config'
npm error A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-09-28T00_02_02_665Z-debug-0.log
等半天安装不成功，网络不行，所以差生文具多，也是可以原谅的。本来不打算安装cnpm，现在必须了。

PS C:\Users\Administrator> npm install -g cnpm --registry=https://registry.npm.taobao.org
npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
npm error A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-09-28T00_05_00_983Z-debug-0.log

原来是域名已经变了，需要换成https://registry.npmmirror.com
PS C:\Users\Administrator> npm install -g cnpm --registry=https://registry.npmmirror.com
added 1 package in 1m
59 packages are looking for funding
  run `npm fund` for details

安装成功后，开始安装vue-cli
PS C:\Users\Administrator> cnpm install -g @vue/cli
PS C:\Users\Administrator> vue --version
@vue/cli 5.0.8

5.创建新的Vue项目
打开vscode，新建，里面并没有新建Vue.js项目的菜单，还得手工创建，Pycharm的社区版创建Django项目也是这个德性，需要命令行创建。
自己新建一个存放项目代码的文件夹，比如c:\vscode
5.1打开Terminal
进入此文件夹cd c:\vscode
5.2创建vue项目
创建vue项目有好多方法，
a.vue create my-project //可以选Vue的版本,vue-cli3.x默认方式
b.vue init webpack my-project //创建新项目，可以使用模板初始化，vue-cli2.x默认方式
c.vue ui //图形化界面创建
我使用vue create创建
Vue CLI v5.0.8
✨  Creating project in C:\vscode\my-project.
⚙️  Installing CLI plugins. This might take a while...

added 867 packages in 49s
100 packages are looking for funding
  run `npm fund` for details
�  Invoking generators...
�  Installing additional dependencies...

added 89 packages in 10s
112 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...
�  Generating README.md...
�  Successfully created project my-project.
�  Get started with the following commands:
 $ cd my-project
 $ npm run serve

5.3进入项目
PS C:\vscode> cd my-project

5.4 运行:运行也有两种方式可供选择
npm run dev //读取package.json,找served的脚本命令执行
npm run serve//这是新方式，Vue CLI3+首选，读取package.json,找served的脚本命令执行

PS C:\vscode\my-project> npm run serve
> vue-01@0.1.0 serve
> vue-cli-service serve
 INFO  Starting development server...
 DONE  Compiled successfully in 8181ms          09:49:41

  App running at:
  - Local:   http://localhost:8080/
此时用浏览器就访问 http://localhost:8080/, 就可以看到你的新项目成果了。

6.Vs code的插件安装
Vue项目创建完成,我们就可以使用vscode打开项目文件夹，然后进行代码编写。
但是使用vs code打开vue文件，就像一个文本编辑器一样，所以还需要安装一些插件来提高编程效率，安装了很多人建议的vetur插件，然后看代码的感觉立马由看黑白电视变成了彩色电视。
至此Vue的开发环境搭好。
Vscode 配置Django就不折腾了，还是Pycharm先用着，目的是解决问题的，不能整天折腾工具。