vue项目创建

vue cli脚手架介绍

• 底层是基于webpack前端构建工具的
• 可以帮助开发者快速搭建一套基于webpack构建工具的开发模板
• cli: command line interface

环境要求

• node版本必须 > v-12.22.0 ( node的版本不能是13版本 )

• 

   

下载安装

npm i @vue/cli -g
// yarn是facebook公司出品的一个js依赖项管理工具
npm i yarn -g

• 如果之前安装过低版本的vue cli脚手架, 建议先卸载

  npm uninstall vue-cli -g
  

检查脚手架工具是否安装成功

vue -V

初始化项目

命名行方式

vue create 项目名称

在这里使用vue2的版本，创建过程中选择第二个

图形界面命令

vue   ui

安装运行依赖（例如axios,vue-router,vuex等，看情况安装需要的依赖）

系统命令

• 启动开发服务器

  npm run serve
  

• 对项目进行最终的打包

  npm run build
  

项目目录结构

 

vscode辅助插件

• vetur: 高亮显示.vue文件中的关键词, 并且提供语法提示
• 
  • 快捷键: vue+tab 快速生成vue组件的基础结构

 

组件样式添加作用域

• 在style标签上添加scoped属性

• scoped：组件的私有化，不对全局造成样式污染

  <style scoped>
  
  </style>
  

在vue脚手架开发环境中启用less

• 安装依赖项

  npm i less less-loader -D
  

• 在组件内部的style标签上添加lang="less"就可以在style上使用less进行编写

  <style lang="less">
  
  </style>
  

路径别名@

• @永远指向项目的根目录下的src文件夹

  // 使用路径别名导入组件
  import NewsPage from "@/components/NewsPage";
  // 使用路径别名@导入样式
  @import '@/assets/css/style.less';
  

脚手架开发环境注意事项

• v-for进行列表渲染的时候,必须给每一个子元素添加唯一不重复的key属性
• 组件名称默认需要使用多个英文单词
• 如果导入了一个模块, 就必须去使用( 如果定义了一个变量, 一定要使用)
• .vue, .js文件后缀名可以省略, 但是.css .less不能省略

关闭eslint插件语法校验功能

/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭eslint插件的语法校验功能
  lintOnSave:false
});