美文网首页
脚手架创建

脚手架创建

作者: 鱼头很厉害 | 来源:发表于2023-11-06 15:11 被阅读0次
    1. 安装脚手架
      npm install -g vue-cli@4.2.3

    2. $ vue create toutiao-m

    Vue CLI v4.2.3
    ? Please pick a preset:
      default (babel, eslint)
    > Manually select features
    

    default:默认勾选 babel、eslint,回车之后直接进入装包

    manually:自定义勾选特性配置,选择完毕之后,才会进入装包

    选择第 2 种:手动选择特性,支持更多自定义选项

    ? Please pick a preset: Manually select features
    ? Check the features needed for your project:
     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     (*) Router
     (*) Vuex
     (*) CSS Pre-processors
    >(*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing
    

    分别选择:
    Babel:es6 转 es5
    Router:路由
    Vuex:数据容器,存储共享数据
    CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
    Linter / Formatter:代码格式校验

    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
    

    是否使用 history 路由模式,这里输入 n 不使用

    ? 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
    

    选择 CSS 预处理器,这里选择我们熟悉的 Less

    ? Pick a linter / formatter config:
      ESLint with error prevention only
      ESLint + Airbnb config
    > ESLint + Standard config
      ESLint + Prettier
    

    选择校验工具,这里选择 ESLint + Standard config

    ? Pick additional lint features:
     (*) Lint on save
    >(*) Lint and fix on commit
    

    选择在什么时机下触发代码格式校验:
    Lint on save:每当保存文件的时候
    Lint and fix on commit:每当执行 git commit 提交的时候
    这里建议两个都选上,更严谨。

    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
      In package.json
    

    Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:
    In dedicated config files:分别保存到单独的配置文件
    In package.json:保存到 package.json 文件中
    这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

    ? Save this as a preset for future projects? (y/N) N
    

    这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
    这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。

    ✨  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
    �  Initializing git repository...
    ⚙  Installing CLI plugins. This might take a while...
    
    [          ........] - extract:object-keys: sill extract json5@2.1.1
    

    向导配置结束,开始装包。
    安装包的时间可能较长,请耐心等待......

    ⚓  Running completion hooks...
    
    �  Generating README.md...
    
    �  Successfully created project topline-m-89.
    �  Get started with the following commands:
    
     $ cd topline-m
     $ npm run serve
    

    安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:

    进入你的项目目录
    cd toutiao-webapp
    启动开发服务
    npm run serve

    相关文章

      网友评论

          本文标题:脚手架创建

          本文链接:https://www.haomeiwen.com/subject/zjbmudtx.html