Vue(二):Vue3安装

参考文档来自于Vue官网:https://cli.vuejs.org/zh/guide/

Vue3安装

Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
可以在cmd命令窗口查看node.js的版本,执行node -v
在这里插入图片描述
开始安装,执行以下安装命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装时候可以通过以下命令查看是否安装

vue --version

在这里插入图片描述
进入一个目录,输入一下命令创建vue3版本的项目

vue create vue03

在这里插入图片描述
提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
在这里插入图片描述
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
在这里插入图片描述
在这里插入图片描述
询问是否选择history模型的路由,这里选择n
在这里插入图片描述
询问选择一个Css的预处理,这里我们选择with node-sass
在这里插入图片描述
这里我们选择放到独立的文件,选择第一个
在这里插入图片描述
询问你是否将作为一个preset保存到以后的项目中,这里不需要,选择N
在这里插入图片描述
就开始创建项目了
在这里插入图片描述
创建完成后,它会提示你先进入你的项目目录,然后执行提示的命令
在这里插入图片描述
项目就创建完毕了,可以根据生成的url进行浏览器的访问
在这里插入图片描述
在这里插入图片描述
在webstrom中导入这个项目,我们来看看项目的结构
在这里插入图片描述
很显然,目录结构和vue2的还是有区别,vue2的目录结构如下
在这里插入图片描述

我们来看看它的index.html文件,放在了public目录下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue03</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue03 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

noscript标签表示,如果你的浏览器不支持js,那么就会展示noscript标签中的内容,支持的话就不会展示noscript标签中的内容

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页