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