Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
@vue/cli
实现的交互式的项目脚手架。@vue/cli
+ @vue/cli-service-global
实现的零配置原型开发。@vue/cli-service
),该依赖:
1.安装node.js 安装vue.cli 必须先安装node.js
node.js安装参考:Node.js安装与基本使用_陶然同学。-CSDN博客_nodejs安装与使用目录1.Node.js 1.1什么是Node.js 1.2环境搭建 1.2.1下载 1.2.2安装 1.2.3测试 1.3切换源 1.3.1工具cnpm 1.3.2工具nrm 1.4Node.js和npm关系 1.5基本操作 ...https://blog.csdn.net/weixin_45481821/article/details/122244505?spm=1001.2014.3001.5501
2.安装vue cli
npm install -g @vue/cli
3.创建项目
vue create 项目名
4.根据需求进行选择
步骤1:在这里选择手动配置
步骤2:上下键控制 空格选择 这里选择Babel转码器 Router Vuex
? Check the features needed for your project: (Press
to select, to toggle all, to invert selection)
>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
步骤3:选择版本 2.x
步骤4:是否开启history
模式 选择否
步骤6:选择你想把你的配置文件放在一个独立的配置文件中?还是放到package.json中?
选择package.json即可 没多大区别
步骤7:询问你是否保存以上设置 方便下次选择 这里选择 否 如果选择是 下面还要给你的配 置 取个名字
步骤8:cd 进入项目 npm run serve 启动项目
步骤9:出现两个地址 按住Ctrl键 点击 出现下面页面 项目创建成功
需求:访问/test-------Test.vue页面
这是一个测试页面
{
path: '/test',
name: 'testName',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
}
测试页面
步骤4:访问Test.vue
管理员身份打开PowerShell
1.运行命令set-ExecutionPolicy RemoteSigned
2.输入 Y 回车
看了vue cli的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!
vue-cli参考文档:介绍 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/