当前位置：首页 > news >正文

vue 使用vueCli 搭建vue2.x开发环境，并且指定ts 和less

news 2025/11/6 6:40:41

nodejs 安装过程省略

设置淘宝镜像永久使用
E:\front-workspace>npm config set registry https://registry.npmmirror.com

# 使用 npm 安装 cnpm（使用淘宝镜像）
npm install -g cnpm --registry=https://registry.npmmirror.com

# 或者使用官方淘宝镜像（两者都可以）
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装VUE脚手架
E:\front-workspace>npm install -g @vue/cli
安装yarn 包管理器
E:\front-workspace>npm install -g yarn
added 1 package in 3s
查看客户端脚手架的版本
E:\front-workspace>vue --version
@vue/cli 5.0.9

创建 Vue 2.x 项目
# 使用 vue create 命令创建项目
vue create vue2-emall-web
在交互式界面中，您可以选择：

选择预设：

Default ([Vue 2] babel, eslint)

Default (Vue 3 Preview) ([Vue 3] babel, eslint)

Manually select features (手动选择功能)

如果选择手动选择，会出现以下选项：
? Check the features needed for your project:
?Choose Vue version
?Babel
?TypeScript
?Progressive Web App (PWA) Support
?Router
?Vuex
?CSS Pre-processors
?Linter / Formatter
?Unit Testing
?E2E Testing

使用键盘上最长的空格键选择需要的某块
Vue CLI v5.0.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: vue2-emall-web

最后回车之后等待项目初始化完成
? Successfully created project vue2-emall-web.
? Get started with the following commands:

$ cd vue2-emall-web
$ npm run serve

使用 HBuilder x 开发工具打开项目文件夹加载项目之后
在客户终端命令行输入
npm run serve
显示如下内容说明启用成功
- Local: http://localhost:8080/ - Network: http://172.20.10.9:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.
http://localhost:8080/ 浏览器访问出现 VUE Welcome to Your Vue.js + TypeScript App 说明前段安装成功

查看全文

http://www.dtcms.com/a/572807.html