vue创建项目的几种方法

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
  
  输入完上面的命令，会询问是否继续，输入 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  --运行