美文网首页
vue2.0升级到vue3.0

vue2.0升级到vue3.0

作者: 壹家全栈 | 来源:发表于2020-09-09 10:28 被阅读0次

    vue-cli 3.0的项目目前已经有很多了,近期接触到的项目几乎都是3.0的版本,因此再用2.0就不再合适了。

    勇于入坑,是对技术最大的尊重。

    首先,我们需要卸载目前电脑上全局安装的vue版本,命令如下:

    npm unistall vue-cli -g

    npm install -g @vue/cli

    注意哦,如果电脑的npm版本过低,就需要重新安装一下:

    npm install -g npm 

    然后我们安装好了之后,就可以使用  npm -v  和  vue --version去查看版本好了,安装好了之后,我们可以新建一个vue项目

    vue create 项目名

    例如:vue ceate tbweb

    安装的时候,选择这个进行安装就可以啦

    然后我们再安装 npm install 就可以了。

    如果项目结构变成这样,说明你的项目已经建好了

    项目结构

    进入这个项目文件夹,默认的启动项目的命令是:

    npm run serve

    vue已经给我们新建了一个初始的项目结构,但是这个项目结构还不完善。我们需要新建一下几个目录。新建的目录都是新建在src目录下。

    views 用户存放我们的页面

    store 放置vuex程序

    api 放置所有的接口程序

    utils 放置工具函数(可有可无)

    router 放置路由信息

    styles 放置全局样式(可有可无)

    components 这个已经有了,用来存放我们页面中的组件。我们可以直接把组件新建在components目录下,不过这样不太清晰,我喜欢在components目录下,再为每个页面新建一个文件夹,把每个页面的组件放在对应的文件下

    assets 这个也已经有了,用来存放我们的资源文件,视频、音频、图片等。

    好啦,ok啦。大家快去尝试吧!

    vue3.0的项目更加轻量级,正如官方介绍的那样,它更加请便简洁,多了一些人性化的设计。

    具体的其它的步骤,推荐查看这篇文章:https://www.jb51.net/article/160270.htm

    相关文章

      网友评论

          本文标题:vue2.0升级到vue3.0

          本文链接:https://www.haomeiwen.com/subject/wzxeektx.html