zoukankan      html  css  js  c++  java
  • 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件:
    安装node.js。
    国内的开发者最好先配置淘宝镜像。
    之后用cnpm来代替npm命令。

    项目创建过程:
    打开cmd,输入命令进入目标工作空间,以本机项目为例:
    cd /d d:
    cd D:workplace
    输入全局安装vuecli的命令:cnpm install -g @vue/cli
    输入检查vue版本的命令:vue --version
    如果版本为3.0+,则继续。
    输入创建项目的命令:vue create vue-sell-cube

    会看到
    ? Your connection to the default npm registry seems to be slow.
    Use https://registry.npm.taobao.org for faster installation? (Y/n)
    就是问你要不要用淘宝镜像,国内的开发者输入y。

    下一步配置预设,会看到可选择的界面
    ? Please pick a preset: (Use arrow keys)
    > default (babel, eslint)
    Manually select features
    按↓键选择手动设置,变成下图
    ? Please pick a preset:
    default (babel, eslint)
    > Manually select features

    按回车进入设置,会看到可选择的界面,按空格勾选或取消勾选。
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    (*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    ( ) Router
    ( ) Vuex
    >( ) CSS Pre-processors
    (*) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing
    我们要选中css pre-processors,babel,linter这三个预设

    回车进入下一步选择css预处理器
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
    Sass/SCSS
    Less
    > Stylus
    选择stylus

    选择eslint规则
    ? Pick a linter / formatter config:
    ESLint with error prevention only
    ESLint + Airbnb config
    > ESLint + Standard config
    ESLint + Prettier
    选择标准配置

    保存时lint还是提交时lint
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) Lint on save
    ( ) Lint and fix on commit (requires Git)
    选择保存时

    把预设配置存入相应文件还是放入package.json
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
    In package.json
    选择相应文件

    是否保存预设配置,保存下次就不会再问你配置预设了
    ? Save this as a preset for future projects? (y/N)
    输入n,不保存。

    等待自动创建完毕。

    进入创建好的项目文件夹,输入命令cd vue-sell-cube
    测试是否正常可运行,输入npm run serve。打开浏览器输入(默认的端口)http://localhost:8080/
    出现
    Welcome to Your Vue.js App
    For a guide and recipes on how to configure / customize this project,
    check out the vue-cli documentation.
    说明项目已经创建成功了。

    cube-ui安装

    输入命令安装 :vue add cube-ui

    是否进行后编译
    ? Use post-compile? (Y/n)
    选择是,输入y

    导入类型
    ? Import type (Use arrow keys)
    > partly, import component on demand, which makes the size of imported code lighter
    fully, import all the components
    选择部分引用。

    自定义主题?
    ? Custom theme? (Y/n)
    选择是

    使用rem?
    ? Use rem layout? (y/N)
    选择否

    使用vw?
    ? Use vw layout? (y/N)
    选择否

  • 相关阅读:
    1.C和C++区别,以及const分析(底层const/顶层const)
    4.移植驱动到3.4内核-移植总结
    3.移植驱动到3.4内核-移植DM9000C驱动
    2.移植3.4内核-支持烧写yaffs2,裁剪内核并制作补丁
    Android Support v4、v7、v13、v14、v17的区别和应用场景
    Android利用canvas画各种图形
    ActionBar 自定义布局定义
    android动画坐标定义
    GitHub上最著名的Android播放器开源项目大全
    CardView 简介和使用
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10469370.html
Copyright © 2011-2022 走看看