基于图形化界面创建Vue项目

记录：267

场景：基于图形化界面创建Vue项目，便于后续查阅。

环境：Node.js v14.17.3

1.打开cmd控制台

运行命令：vue ui

截图：

 

2.项目仪表盘

截图：

3.Vue 项目管理器-项目

截图：

4.Vue 项目管理器-创建

截图：

5.创建新项目-详情

截图：

6.创建新项目-预设

本例勾选：手动
截图：

7.创建新项目-功能

本例勾选组件：Choose Vue version；Babel；Router；Vuex；CSS Pre-processors；Linter / Formater；使用配置文件

截图：

8.创建新项目-配置

本例选择配置如下：

版本：2.x

Pick a CSS pre-processors：Less

Pick a linter / formatter config：ESlint + Standard config

Pick additional lint features：Lint on save

截图：

9.保存为新预设

保存为新预设，便于下次使用。

截图：

10.创建中

截图：

11.安装插件-所有插件

本例安装插件：vue-cli-plugin-element

截图：

12.安装插件-配置插件

截图：

13.安装新的依赖

本例安装运行依赖：axios

截图：

14.创建并配置vue.config.js

例如：

module.exports = {
  devServer: {
    port: 18081
  }
}

15.创建并配置.postcssrc.js

例如：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {}
  }
}

常用指令

1.查看组件版本

npm view vue versions
cnpm view vue versions

2.安装依赖

npm install
cnpm install

3.启动运行

npm run dev
npm run serve

4.设置管理员权限,即可安装和运行指令

set-ExecutionPolicy RemoteSigned

注意：主要针对安装一些组件时报错创建文件夹或者文件无权限。

5.安装cnpm,切换为国内镜像

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

6.安装依赖

运行依赖:

npm install jquery  -S

开发依赖:

npm install jquery  -D

指定版本:

npm install jquery@3.6.0  -S

以上，感谢。

2022年3月19日