Vue-CLI构建vue项目

Vue-CLI构建vue项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统; Vite构建的项目很多都没有, 需要自己按需安装。

安装

全局安装: 在任意目录执行下面这个命令都可以安装成功!

npm install -g @vue/cli

检查是否安装成功

vue --version

安装成功之后, 就可以通过cli来创建项目

创建项目

直接用cmd命令创建项目

创建一个新项目

vue create '项目文件夹名称', 下面的例子, 项目文件夹名称为work-admin

• 执行创建命令

vue create work-admin

• 选择合适配置
  • *** Babel 转码器, 一般需要的
  • TypeScript js的超集, 没用到就不需要
  • Progressive Web App (PWA) Support 渐进式的web程序, 这里暂时不需要
  • *** Router 路由, 一般需要
  • Vuex 状态管理
  • CSS Pre-processors css的预处理器,比如less等, 不知道暂时不用
  • ***Linter / Formatter 代码风格的格式化,一般选中
  • Unit Testing代码的单元测试, 先不用管
  • E2E Testing代码的E2E测试,先不用管
    
    上面选择之后, 回车, 就是选择Vue的版本号
• 选择Vue版本
  
• 选择历史模式还是hash模式, 我们这里选择历史模式
  
• 选择语法检测和代码格式化插件的配置,这里选择常规的或者默认的配置就可以了
  • ESLint with error prevention only 默认配置
  • ESLint + Airbnb config 国外一家公司的配置
  • ESLint + Airbnb config 标准的配置
  • ESLint + Prettier 常规的配置
• 选择语法和格式化检测的时间
  • Lint on save 代码保存的时候, 就去检测, 一般选中这个
  • Lint and fix commit 提交的时候去检测。
    
• 选择这些插件配置的一个保存方式
  • In dedicated config files 各自保存各的, 自己保存自己的文件夹,分开设置,选择这个分开配置
  • In package.json 统一保存在这个文件里面
    
• 是否保存下来这个配置, 以后供别的项目使用
  
  至此, 安装完成, 上面那一步稍微有点慢, 程序会自动去安装依赖等, 出现下面页面表示安装成功
  

启动项目

切换到项目目录,执行下面命令

npm run serve

注意: vite创建的项目启动命令是 npm run dev

项目目录介绍

• node_modules/ 存放项目依赖的文件夹
• public/ 存放index.html和图标
• src/ 项目的源代码, 根路径
  • src/assets/ 存放图片,css文件,js文件
  • src/components/ 存放一些公共的组件
  • src/router/ 存放路由文件目录
  • src/views/ 页面组件router
  • src/router/index.js 路由脚本文件
  • src/main.js 整个项目的入口文件
  • src/App.vue 根组件
• babel.config.js babel关于转码器的一些配置
• package.json 整个项目依赖的一些版本信息,注意它是一些大概得版本, 不是具体的版本
• package-lock.json 记录node_modules/模块下的具体来源和版本号以及其他信息
• vue.config.js vue的一些配置