美文网首页Vue
Vue 项目创建基础配置

Vue 项目创建基础配置

作者: survivorsfyh | 来源:发表于2021-02-01 14:48 被阅读0次

    Vue 项目创建时候的一些基础配置小记:
    CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的指令,可用来创建工程、启动服务等;
    CLI service 即 @vue/cli-service 开发环境的依赖,构建于 webpack 和 webpack-dev-server,可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等;
    CLI 插件可以集成一些架包快速配置项目等;

    项目创建,cd 到指定的目录下,执行

    vue create xxxx // xxxx 即项目名称 project-name
    

    创建项目 create 后会有几个配置选项,具体如下:

    1.use history mode for router - Y
    即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由
    其中 hash 模式浏览器 url 地址中会带有 # 号,而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法

    2.Pick a CSS pre-processor - stylus
    SCSS/SASS:scss 是 sass3 的新语法,完全兼容css3 且继承于 sass;sass 需 ruby环境,在服务端处理
    LESS:借助 node.js 通过编译处理输出 css 至浏览器,同时兼容客户端与服务端运行
    Stylus:用于给 node 项目进行 css 预处理支持,stylus 功能上更加强壮和 js 关系更加紧密

    3.Pick a linter / formatter config - ESLint + Prettier
    ESLint with error prevention only: 仅错误预防
    ESLint + Airbnb config
    ESLint + Standard config: 标准模式
    ESLint + Prettier: 使用较多,推荐

    4.Pick additional lint features - Lint on save
    (·) Lint on save:保存即检查
    ( ) Lint and fix on commit: fix 和 commit 的时候才检查

    5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files
    In dedicated config files:独立文件中放置
    In package.json:放在 package.json 中

    6.Save this as a preset for future projects - N
    是否记录本次创建工程的如上配置选项并起个名称

    安装时可能需要的一些资源:nodejsHomebrew


    以上便是此次分享的全部内容,希望能对大家有所帮助!

    相关文章

      网友评论

        本文标题:Vue 项目创建基础配置

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