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

2021-12-26 21:02:01 阅读：224 来源： 互联网

安装流程
一.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 —— 单元测试

选择完成后回车
在这里插入图片描述

2.3是否使用路由的 history模式，选择 yes
在这里插入图片描述

2.4 选择css预处理器，请根据个人情况进行选择，这里我选择的是 Sass/SCSS < with dart-sass>
在这里插入图片描述

2.5 选择 Eslint 的使用方式，我选择的 ESLint + Prettier
在这里插入图片描述

2.6 选择语法检查方式，我自己选择保存就检测
第一个是保存检测，第二个是fix和commit的时候检测
在这里插入图片描述

2.7选择以上的配置文件放置的位置，把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在独立文件夹
在这里插入图片描述

2.8 是否保存以上的 preset 配置，可在将来创建项目的时候直接引用，我选择no
键入N不记录，如果键入Y需要输入保存名字
在这里插入图片描述

确定后，等待下载依赖模块

标签：npm,vue,环境,yarn,install,安装,回车
来源： https://blog.csdn.net/weixin_44806193/article/details/122160536

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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