vue创建项目 - 技术栈

1、配置node环境

Node.js 安装配置-----菜鸟教程
 npm 使用介绍-----菜鸟教程

淘宝镜像

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

powershell 复制代码

npm install -g cnpm --registry=https://registry.npmmirror.com

这样就可以使用 cnpm 命令来安装模块了：

powershell 复制代码

cnpm install [name]

npm 版本需要大于 3.0，如果低于此版本需要升级它：

查看版本

powershell 复制代码

$ npm -v
> 2.3.0

#升级 npm
cnpm install npm -g

#升级或安装 cnpm
npm install cnpm -g

2、安装及创建

2.1 独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

下载vue.js（2.0版本）

下载vue.js (版本为@3.2.36)

2.2 使用 CDN 方法

2.2.1 vue2版本

Staticfile CDN（国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

代码

html 复制代码

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

html 复制代码

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

2.2.2 vue3版本

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

html 复制代码

<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>

html 复制代码

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

2.3 NPM 方法

由于 npm 安装速度慢，这里用的是淘宝的镜像及其命令 cnpm

2.3.1 vue2

指定2.0版本安装

这俩比较稳定

powershell 复制代码

cnpm install vue@2.2.2
cnpm install vue@2.7.0

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
全局安装 vue-cli

powershell 复制代码

cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

powershell 复制代码

vue init webpack my-project

这里需要进行一些配置，默认回车即可

powershell 复制代码

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

powershell 复制代码

cd my-project
cnpm install
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/

2.3.2 vue3

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用，然后在命令行中运行以下命令：
最新稳定版

powershell 复制代码

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

powershell 复制代码

$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 vue3-test1，其他默认回车即可
&#x2714; Project name: ... vue3-test1
&#x2714; Add TypeScript? ... No / Yes
&#x2714; Add JSX Support? ... No / Yes
&#x2714; Add Vue Router for Single Page Application development? ... No / Yes
&#x2714; Add Pinia for state management? ... No / Yes
&#x2714; Add Vitest for Unit Testing? ... No / Yes
&#x2714; Add an End-to-End Testing Solution? › No
&#x2714; Add ESLint for code quality? ... No / Yes

Scaffolding project in /Users/vue3-test1...

Done. Now run:

  cd vue3-test1
  npm install
  npm run dev

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

powershell 复制代码

$ cd vue3-test1
$ npm install
$ npm run dev
  VITE v4.3.4  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

成功执行以上命令后访问 http://localhost:5173/

2.3.2 Vite

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目，语法格式如下：

powershell 复制代码

npm init vite-app <project-name>

创建项目 vue3-test2：

powershell 复制代码

npm init vite-app vue3-test2

powershell 复制代码

$ cd vue3-test2
$ cnpm install
$ cnpm run dev
> vue3-test2@0.0.0 dev /Users/vue3/vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

3、注意事项或者小贴士

3.1 Windows系统环境配置权限

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"，输出如下结果：

powershell 复制代码

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

这个一定要配好的撒，不然后面报错报的你哭爹喊娘

3.2 苹果电脑在安装过程中可能会出现npm权限不够

powershell 复制代码

sudo   root

命令执行完输入账号密码，敷一下权限，输密码的时候不会动的，输完回车就行了

3.3 有时候有些报错命令行可能已经告诉你要怎么做了，要看好

类似什么 you could try to: npm install xxx或者you could try to run: npm install xxx.要是xxx巨长无比那就回去看看大概率你路径哪儿错了绝对路径换相对路径

好了暂时就这些，想起来再回来补充吧。Byebye~