开发

创建vue项目

前端

Posted by JY on August 10, 2020

安装vue-cli

vue -V # 查看是否安装vue

# 安装
npm install @vue/cli -g 
npm install -g @vue/cli-init

创建项目

方式1
# 1. 创建名称为project的项目，项目名称不允许出现大写
vue create project 

# 选择默认配置 default <babel, eslint>
# 2. 选择自定义配置  Manually select features 
# 3. 选择需要的配置
  Babel (必选)
  TypeScript（项目中使用typescript开发的话，就勾选）
  Progressive Web App (PWA) Support  (接口缓存，优化项目)
  Router (是否使用路由 history router，即是否路径带 '#' 号，建议选择 N)
  Vuex (当组件数量多的时候，需要使用vuex来管理数据值)
  CSS Pre-processors (css预处理器，node-sass是自动编译实时的，dart-sass需要保存后才会生效)
  # 用于校验代码，建议不选择，否则在写代码时会有很多格式限制，甚至提示错误
  Linter / Formatter (选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多)
  Unit Testing (代码测试)
  E2E Testing（需求界面测试）
# 4.根据所选的配置进行Y/N选择
方式2
# 使用vue init webpack myweb命令开始创建项目
vue init webpack myweb
? Project name (myweb)  vue   ---------------------项目名称，这里注意是不允许出现大写字母的。
? Project description (A Vue.js project) myweb   ---------------------项目描述
? Author super  --------------------- 项目创建者
? Vue build (Use arrow keys)  直接回车 出现  ? Vue build standalone
? Install vue-router? (Y/n)  Yes  --------------------- 是否安装Vue路由，通过路由控制页面跳转
? Use ESLint to lint your code? (Y/n)  No ---------------------是否启用eslint检测规则，建议选择No
? Setup unit tests? (Y/n)  Yes ---------------------是否安装程序的单元测试
? Pick a test runner?  回车默认  ---------------------选择一个测试工具
? Setup e2e tests with Nightwatch? (Y/n)  Yes------------ 是否使用npm进行安装刚刚的配置

注：

  • vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录
  • vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。
  • 最新的vue-cli4.x也使用vue-cli3.x的初始化方式

  • 使用 vue cli 2 构建的项目升级到 Vue CLI 4 ，参考：https://www.jianshu.com/p/ac3dca1254db

  • vue-cli 3、4 与 2 版本的区别

    • vue-cli 3、4目录比2简洁了很多，没了build和config等目录
    • vue-cli 3、4的github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
    • vue-cli 3、4项目架构完全抛弃了 vue-cli 2 的原有架构，3、4 的设计更加抽象和简洁
    • vue-cli 3、4是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
    • vue-cli 3、4设计原则是“0配置”
    • vue-cli 3、4提供了 vue ui 命令，提供了可视化配置，更加人性化

启动项目

cd project # 进入项目 
# 启动项目
npm run serve # 若用vue create project的方式创建
npm run dev # 使用vue init webpack myweb命令创建
vue ui # 可以通过vue的GUI界面来管理项目
CATALOG
    FEATURED TAGS
    Introduction FSL Transfer Learning paper GAN Application Datasets Classification Attention Mechanism Learning Paradigm Anomaly Detection Backbone Cluster Overview Segmentation Model Compression NAS Object Detection Record Facial Tools Transformer SSL ZSL GCN Fine-grained Meta-Learning Data Imputation 开发 架构 Video Analysis Object Tracking interview
    FRIENDS