Vue 3 + Vite 入门 【Ubuntu + Vim配置】

Vue 3 + Vite 入门 【Ubuntu + Vim配置】

1.Vue.js

中文文档 https://cn.vuejs.org/guide/quick-start.html

参考 https://www.youtube.com/watch?v=rNQIA0Fe9KQ&t=5s

2.vim-vue-plugin

参考 https://github.com/leafOfTree/vim-vue-plugin

2.官方推荐Vim的coc-volar扩展工具安装

先在vim中安装 coc.nvim

https://github.com/neoclide/coc.nvim/issues/3258

#编辑.vimrc 配置文件
vim ~/.vimrc

默认使用Vundle插件管理，在call vundle#begin()下面加入配置

" Use release branch (recommended) 使用推荐到编译好了的版本
Plugin 'neoclide/coc.nvim', {'branch': 'release'}

重新进入vim

vim

:PluginInstall

接下来别管跳出来的没有build.js之类的提示，直接进入插件文件夹

cd ~/.vim/bundle/coc.nvim
#或者直接用npm
cnpm install

再进vim就没有提示了

用CocInstall: 安装 coc-volar

https://github.com/yaegassy/coc-volar

:CocInstall @yaegassy/coc-volar

如果coc默认的源装不了，就进入coc的node_modules文件夹手动安装

cd ~/.config/coc/extensions/node_modules

官网搜索需要装的包 ：https://www.npmjs.com/search?q=coc-volar

npm不行就用cnpm

cnpm install @yaegassy/coc-volar
cnpm install @yaegassy/coc-volar-tools
cnpm install coc-json

2.1 npm reify:一直报错或卡住问题解决

• 切换taobao镜像源

#配置淘宝镜像
npm config set registry https://registry.npm.taobao.org/
#一旦情况不对或翻墙成功的，切换回去原来的默认镜像源
npm config set registry https://registry.npmjs.org
#查看当前镜像源(Optional)
npm get registry

• 使用cnpm安装

#安装淘宝的国内npm替代工具cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm install <package-name>

3.coc-volar开启Takeover Mode

• 先打开任意vue,ts,js,tsx,jsx为后缀的文件

• 然后运行 :CocCommand volar.initializeTakeOverMode

• 当跳出提示Enable Take Over Mode? (y/n)?时，输入y

• 这时，.vim.coc-settings.json文件会被创建至项目的根路径

• 此时"volar.takeOverMode.enanbled": true和"tsserver.enable": false等配置会被添加

• coc.nvim将被重启，配置将起作用

关闭该模式，只需删除根路径下的 .vim/coc-settings.json文件，并重启vim即可

更多配置请参考：https://github.com/yaegassy/coc-volar

4.创建一个 简单的 vue 项目

mkdir vuework
cd vuework
npm create vue@latest
#所有的选项都默认No直接回车
cd vue-vite-demo
cnpm install
npm run dev

按住 o + Enter键，系统自动打开URL，看到Vue 3的欢迎页面，成功！

如图：

[注意]

如果想使用中文拼音输入法，参考链接：

https://blog.csdn.net/fr16021028/article/details/125891812

在安装Chinese(Simplified) 后，一定要关掉所有进程比如正在运行的vue项目，重启Ubuntu虚拟机，之后就会在输入源选项里看到智能拼音

.csdn.net/fr16021028/article/details/125891812

在安装Chinese(Simplified) 后，一定要关掉所有进程比如正在运行的vue项目，重启Ubuntu虚拟机，之后就会在输入源选项里看到智能拼音