zoukankan      html  css  js  c++  java
  • Vue3

    Node.js 和 NPM

    独立安装 Node.js 和 Npm(安装 Node.js即会安装 npm),查看版本

    node -v
    npm -v
    

    淘宝镜像

    npm 如需淘宝镜像可安装 cnpm(非必须)

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    引用或安装Vue3

    引用方式最为简单,在 html 文件中加入 vue 的引用即可,地址基于随笔时最新版本,引用时按实际URL修改

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>
    

    安装方式为打开控制台,运行命令安装 vue-cli 工具,当前最新版本4.5.12,如需升级或重装,最好卸载已有vue-cli并重启后再进行安装

    npm install -g @vue/cli@next
    vue --version
    

    构建一个Vue3项目

    在成功安装 vue-cli 之后即可使用 Vue3 带来的新工具 Vite 构建示例项目,方法一,先独立安装 Vite

    npm install -g create-vite-app
    

    方法二,初始化项目时安装 Vite,会自动先安装 Vite 后创建项目比较方便。新建一个叫做 nothing 的项目,按提示键入 y 确认安装 Vite,安装并创建成功后提示运行命令。

    • cd nothing 进入目录
    • code . 使用 vs code 打开项目目录
    • npm install 初始化项目,添加默认的依赖
    • npm run serve 运行服务,启动项目
    npm init vite-app nothing
    
    // 控制台输出
    Need to install the following packages:
      create-vite-app
    Ok to proceed? (y) y
    npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
    Scaffolding project in D:HomeReposvue3
    othing...
    
    Done. Now run:
    
      cd nothing
      npm install (or `yarn`)
      npm run dev (or `yarn dev`)
    

    可以使用默认的 npm run serve 来启动项目,也可以使用更快的 Vite 来启动项目,键入 npm run dev 使用 Vite 启动并输出结果

    npm run dev
    
    > nothing@0.0.0 dev
    > vite
    
    [vite] Optimizable dependencies detected:
    vue
    
      Dev server running at:
      > Network:  http://192.168.0.192:3000/
      > Network:  http://192.168.137.1:3000/
      > Network:  http://192.168.116.1:3000/
      > Local:    http://localhost:3000/
    

    页面

    如启动提示,在浏览器中运行本地地址打开 Vue3.x 欢迎页面即成功

    Visual Code

    vs code 插件安装了 Vetur、Vue 3 Pack(hollowtree),在 components 下新建 Add.vue,键入 vbase 有了 Vue3 相关提示

    ## 不重要的其实最重要
  • 相关阅读:
    Silverlight Working with Sockets
    在Visual Studio 2010中使用gtest
    一个简单排序(就是传说中的冒泡)
    lucene锁与IndexModifier
    SQL Server 中的CTE递归查询
    利用Intelligencia.UrlRewriter.dll实现URL重写
    hibernate.cfg.xml详解
    WCF能干什么?
    C# 生成PDF
    MS SQL Server查询优化方法
  • 原文地址:https://www.cnblogs.com/cinlap/p/14627459.html
Copyright © 2011-2022 走看看