GuangZhou Xinsi Technology Co. Ltd.

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== Vue Misc ======

===== - 安装开发环境 =====
  * 安装 node 环境（包含 npm包管理器）
  * 安装 vue cli 脚手架
  * 更换淘宝镜像
  * 初始化第一个vue项目

==== - 安装 node 环境 ====

  # For MACOS
  
  brew install node
  # 安装过程日志 ...
  
  # For Windows
  download from https://nodejs.org/zh-cn/download/, and install
  
  # Check it
  node -v
  v16.4.2
  
  npm -v
  7.18.1

==== - 安装 vue cli 脚手架 ====
  npm install -g vue
  
  vue -V
  2.9.6

==== - 更换淘宝镜像 ====
  npm install -g cnpm –registry=https://registry.npm.taobao.org

  cnpm install -g vue-cli
==== - 初始化第一个vue项目 ====
  vue init webpack webapp_test

==== - 测试 ====
  cd <webapp_test>
  npm run dev

打开 http://localhost:8080

===== - 不使用构建工具使用Vue =====

如果没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以 .prod.js 结尾的构建文件）。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。
  * 如果需要使用全局变量版本（通过 Vue 全局变量访问）：请使用 vue.global.prod.js。
  * 如果需要 ESM 版本（通过原生 ESM 导入访问）：请使用 vue.esm-browser.prod.js。

  - 官网下载Vue.js文件 https://unpkg.com/browse/vue@3.0.11/dist/
  - 引入

<code>
<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
</code>
===== - 搭建测试  =====

  # install http server
  npm install http-server -g
  
  http-server -v
  v14.1.1
  
  http-server -p 8080

GuangZhou Xinsi Technology Co. Ltd.

User Tools

Site Tools

Page Tools