Vue Vue3项目创建学习和npm

创建vue3项目

使用vue cli创建

使用vue cli创建vue3项目官方文档

##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
或
vue -V
##安装或者升级你的@vue/cli
npm install -g @vue/cli
##创建
vue create vue_test
##启动
cd vue_test
npm run serve

查看版本，创建 vue3_test 项目

选择使用 vue3

选择安装使用 NPM

等待 ing

创建成功，进入项目，并运行：

使用vite创建

使用vite安装官方文档

vite官网

。什么是vite? ——新一代前端构建工具
。优势如下:
------1、开发环境中，无需打包操作，可快速的冷启动
------2、轻量快速的热重载(HMR)
------3、真正的按需编译，不再等待整个应用编译完成

##创建工程
npm init vite-app 
##进入工程目录
cd 
##安装依赖
npm install
##运行
npm run dev

按照步骤执行以上命令即可：

分析目录结构

分析 Vue cli 创建的Vue3项目目录结构

首先看 main.js

//引入的不再是Vue构造函数了
//引入的是一个名为 createApp 的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似vue2中的vm,但更“轻”)
createApp(App).mount('#app')

在 vue.config.js 中增加 lintOnSave:false 来关闭语法检查

App.vue 中

<template>
  
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
script>

<style>
......
style>

其他和 vue2 差不多

安装开发者工具

Chrome 网上商店里搜索 vue，安装第一个带 beta 角标的这个，支持 vue3。之前安装的 vue 开发者工具可以禁用了

关于 npm 和 yarn

npm 比较慢可以选用 yarn，使用 yarn -v 查看 yarn 版本，如果没有安装，使用 npm i -g yarn 来安装 yarn

或者 我们可以修改 npm 的镜像，使用 npm config get registry 可以得到一个链接，这个链接就是我们下载的地址

我们可以使用 npm config set registry https://registry.npmmirror.com/ 这样就设置成了国内的镜像

可以使用 npm install npm@latest -g来更新到 npm 最新版本

如果想查看某个依赖都有哪些版本可以打开 https://www.npmjs.com/，例如我们想看下 vue-router 3.x 的最新版本，我们可以搜索 vue-router，然后查看 versions 即可