安装vue（2.x和3.x）及相关环境

2024-02-08 13:53:52

安装流程
一.vue2.x
1.安装node.js (https://nodejs.org/en/)
一直下一步即可
输入 node -v > 返回版本号安装成功
2.基于 Node.js 安装cnpm（淘宝镜像）

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

输入 node -v > 返回版本号安装成功
3.安装webpack
利用cnpm安装webpack 命令行语句如下时间略长。

cnpm install webpack -g

输入 webpack -v > 返回版本号安装成功

4.接下来就是全局安装vue-cli，时间略长
安装语句为：

cnpm install --global vue-cli

验证命令:vue -V (V要大写)

5.创建项目

D:>cd D:\2\vue 找到相应文件夹
D:\2\vue\sound>vue init webpack sound 创建文件夹名为sound 的vue项目
在cmd 里面输入 vue init webpack vue_test（项目文件夹名称）回车等一小会一次进行下面的操作

#新建一个目录进入其中
#安装vue-cli（脚手架）
vue install vue-cli -g 

vue init <template-name> <project-name>
#例如
vue init webpack my-project


? Project name (demo)//输入项目名字,可以直接按回车
? Project description (A Vue.js project)//输入项目介绍,可以直接按回车
? Author (***)//作者
? Install vue-router? (Y/n)//是否安装vue-router vue路由,安装,Y
? Use ESLint to lint your code? (Y/n)//是否使用代码规范,不使用,n
? Set up unit tests (Y/n)//是否安装测试单元,不安装,n
? Setup e2e tests with Nightwatch? (Y/n)//不安装
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
//选择No
# Project initialization finished!
# ========================

To get started:

  cd demo
  npm install (or if using yarn: yarn)
  npm run dev

//项目包创建成功

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

6.安装依赖

cd vue_test   ->找到相应文件
npm install   /  cnpm install   /  cnpm i    ->安装依赖
npm run dev    / yarn serve  / npm run serve  ->运行项目
Your application is running here:   http://localhost:8080
运行成功

7.打包

npm run build / yarn build

安装yarn

npm install yarn --save
yarn install

3、vue3.x创建项目

vue create  项目名称

一般选第三个默认选项，回车

TypeScript —— 使用JS的超类语言TS
Progressive Web App Support —— PWA单页应用
Router —— 使用路由管理器
Vuex —— 使用 vue 状态管理器
CSS Pre-processors —— CSS预处理
Linter / Formatter —— Eslint 安装
Unit Testing —— 单元测试
E2E Testing —— 单元测试

选择完成后回车