vue创建项目的几种方法

简介: enter后,进入手动选择配置 ,有以下Installed CLI Plugins选项(注:空格单选,a全选,i反向全选)

vue项目创建方法


1、vue create +项目名


1.进入功能配置选择


(1. default (babel, eslint) 默认预设配置 babel, eslint
  ( 2. Manually select features  手动选择配置


2.enter后,进入手动选择配置 ,有以下Installed CLI Plugins选项(注:空格单选,a全选,i反向全选)


(1. babel
    (2. TypeScript  
    (3. Progressive Web App (PWA) Support  支持渐进式网页应用程序
    (4. Router 路由管理器
    (5. Vuex 状态管理模式(构建一个中大型单页应用时)
    (6. CSS Pre-processors css预处理
    (7. Linter / Formatter 代码风格、格式校验
    (8. Unit Testing 单元测试
    (9. E2E Testing E2E(End To End)即端对端测试


3.enter后,Installed CLI Plugins配置细节


(1 TypeScript
    是否使用class风格的组件语法:Use class-style component syntax?
    是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
      (2. Router 路由管理器
    路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 
      (3. CSS Pre-processors css预处理
  选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
        选项:
    Less
    Sass
    Stylus
      (4. Linter / Formatter 代码风格、格式校验
    选择Linter / Formatter类型:Pick a linter / formatter config:
        选项:
    TSLint
    ESLint with error prevention only  仅错误预防
    ESLint + Airbnb config  Airbnb配置
    ESLint + Standard config 标准配置
    ESLint + Prettier
       选择lint方式:Pick additional lint features
       选项:
    Lint on save 保存时检查
          Lint and fix on commit 提交时检查
      (5. Unit Testing 单元测试
       选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
       选项:
    Mocha + Chai  
          Jest 
      (6. E2E Testing E2E(End To End)即端对端测试
        选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
        选项:
    Cypress (Chrome only) 
          Nightwatch (Selenium-based)
      (7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
         Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
         选项:
     In dedicated config files 在专用的配置文件中
           In package.json 在package.json
      (8. 将此作为将来项目的预置吗?
   Save this as a preset for future projects?
         选项:
     In dedicated config files 在专用的配置文件中
           In package.json 在package.json
      (9.保存预设为
           Save preset as:


4.项目启动


1) cd 项目名
      2) 运行 npm run serve
      3) 运行地址 
         APP runing at:
      -Local  :http:localhost:8080/
    -Network:http://192.168.1.90.8080/


2、vue init webpack + 项目名


项目配置说明


?Project name demo    --项目名称
?Project description test project  --项目描述
?Author --创建用户名
?Vue build   --vue项目构建打包名称
?Install  vue-router? Yes/No  --是否安装router
?Use EsLint to lint your code?Yes/No  --是否使用ESLint校验
?Set up unint tests?Yes/No --是否安装测试单元
?Setup e2e tests with Nightwatch?Yes/No  --是否安装e2e测试
?Should we run `npm install` for you after the project has been created?(recommended)
  --Yes,use NPM 
  --Yes,use Yarn
  --No,I will handle the myself
1) cd 项目名 --进入项目
2) npm install --安装依赖
3) npm run dev --启动项目


3、vite创建项目


npm init vite@latest  --创建的是最新版本`Vite`的vue项目
  输入完上面的命令,会询问是否继续,输入 y 然后按回车即可。
   Ok to proceed?(y)
   输入项目名,本文使用了“ol-demo”这个项目名。
     Project name: ol-demo
  选择要使用的框架,这里选择 vue 即可(我选的是不使用 ts)。
  Select a framework:
    vanilla
    vue
    react
    preact
    lit-element
    svelte
   cd ol-demo   -- 进入项目
   npm install  --运行


4、通过 npm init vite-app 创建


npm init vite-app hello-vue3  --创建的是`Vite1.0`版本的
# same as
npx create-vite-app hello-vue3


目录
打赏
0
0
0
0
1
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
51 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
66 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
62 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
69 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
77 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
79 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
155 1

热门文章

最新文章