【Vue篇】Vue 项目下载、介绍(详细版)

如何创建一个vue项目?首先要有环境,如下:

powershell 复制代码
nodejs
vue-cli

如果有以上的工具就直接跳过安装教程
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

创建vue项目

选择一个位置,你要存放项目的路径,然后在此位置上终端 或者 cmd

个人推荐方法二

方法一

1、创建

vue init webpack "项目名称"

2、启动

切换到项目目录然后运行

powershell 复制代码
cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever

方法二

1、 创建

vue create 项目名

Default(Vue 3 babel, eslint)表示以Vue3为基础的模板,带eslint检查

Default(Vue 2babel, eslint)表示以Vue2为基础的模板,带eslint检查

Manually select features 自定义配置

注意:空格键是选中与取消,A键是全选

TypeScript 支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

( ) 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) 测试

(上述按需所取)
补: 如果第一步全选话会出现以下选项

Use class-style component syntax? (Y/n):是否使用class风格的样式语法(TypeScript)

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) :是否使用class风格的组件语法(TypeScript) yes

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n):是否使用history模式

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

选择预处理的模式

( )Sass/SCSS (with dart-sass)

( )Sass/SCSS (with node-sass)

( )Less

( )Stylus

Pick a linter / formatter config: (Use arrow keys):选择语法检测规范

( )TSLint

( )ESLint with error prevention only

( )ESLint + Airbnb config

( )ESLint + Standard config

( )ESLint + Prettier

Pick additional lint features: (Press to select, to toggle all, to invert selection)选择 保存时检查 / 提交时检查

(*) Lint on save

( ) Lint and fix on commit

引用

Pick a unit testing solution: (Use arrow keys) :测试方式

( )Mocha + Chai

( )Jest

引用

Pick a E2E testing solution: (Use arrow keys) :e2e测试方式

( )Cypress (Chrome only)

( )Nightwatch (Selenium-based)

引用

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)选择配置信息存放位置,单独存放或者并入package.json

( )In dedicated config files

( )In package.json

Save this as a preset for future projects? (y/N) :是否保存当前预设,下次构建无需再次配置

完成

2、启动

切换到项目目录然后运行

powershell 复制代码
cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever
相关推荐
程序员小羊!3 分钟前
02CSS预备知识
前端·css3
用户059540174469 分钟前
用LangChain+Chroma实现RAG多轮对话记忆与自动化测试,把bug发现时间从2小时压缩到5分钟
前端·css
2401_8685347813 分钟前
常见的 vue面试题目
前端·javascript·vue.js
星栈13 分钟前
Makepad UI 代码怎么读:别被语法吓住
前端·rust
胡萝卜术20 分钟前
从零搭建 NLP Demo:用 ES6 模块化 + DeepSeek API 构建你的第一个 AI 应用
javascript·面试
前端市界21 分钟前
实用指南:如何本地化部署 Sentry (Self-Hosted) 完整教程
前端
颂love23 分钟前
TypeScript速学
前端·javascript·typescript
IT策士29 分钟前
第 46 篇 k8s之CI/CD 集成:GitOps 理念与 ArgoCD
前端·容器·kubernetes
Dalydai32 分钟前
AI 辅助大屏开发:怎么让 AI 干活,但别让它干砸
前端
凌涘32 分钟前
深入理解 JavaScript 执行机制:从执行上下文到调用栈全解析
前端·javascript