基于vue-cli/@4.3.1搭建vue/@3.0.0-beta.1版本的前端项目

vue3.0-beta发布已经有一段时间，最近也在看相关的使用教程。目前大多数的免费教程中的使用都只是单独的引入其中的一些api来在页面中使用，而我想要使用脚手架搭建一个完整的项目，所以记录一下第一次使用过程的记录及其中遇到的问题。

我的操作步骤及遇到的问题

• 1. 选择一个文件夹，进入该文件夹终端， 运行vue create test

这里我选择第二项进行自定义配置，我项目中还会用到路由、vuex和css处理器。

之后看自己的需要选择自己要使用的css预处理器和eslint规则之后一路回车等待项目初始化完成。我们会看到在文件夹下看到创建好的文件。

在package.json中查看当前所使用的vue的版本信息，此时还是2.x版本。

• 2.在控制台 cd test,进入项目目录下，vue add vue-next, 回车-> 输入Y -> 回车，此时由于我的脚手架版本还是4.0.1，安装vue-next失败，提示需要升级vue-cli（如果vue-cli已升级到4.3以上可跳过此处）。
  接下来升级vue-cli，先npm uninstall vue-cli -g 卸载，之后再npm install -g @vue/cli安装，此时我还是安装失败

查了半天资料之后是由于系统中的/usr/local/lib/node_modules/@vue文件夹还未删除，需要手动删除@vue文件夹，此时去访达下查找usr目录发现找不到，还好可以在终端根据指令打开 cd /usr/local/lib/node_modules/ 回车，继续输入 open . (window输入 start .)就能进入对应文件夹下，找到@vue文件夹将其删除，之后再执行npm install -g @vue/cli （使用cnpm或者yarn global add @vue/cli）安装成功，再输入vue -v得到 @vue/cli 4.3.1 既升级成功。

接下来回到test目录下，再次执行vue add vue-next

此时再打开package.json，我们就可以看到vue的版本已经升级为3.0.0-beta.1

• 3. npm run serve 启动项目，到这里项目框架初步就搭建好了，后续vue.config.js的配置项和之前的没什么变化，根据自己的需要配置即可。
• 4. main.js中vue的构建、router和vuex引入方式和之前的版本的有一点变化，vue3.0具体在vue文件中的使用接下来可以去尝试了。
     
     

第一次掘金文章之旅到这就结束了。