vue-cli 环境搭建及项目目录

vue

说在前面

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

上面这段话摘抄于Vue官方的介绍。因为Vue是由JavaScript封装成的一套用于构建用户界面的渐进式JavaScript框架。

除了官方说得HTML、CSS、 JavaScript 之外，在利用Vue开发页面时还需要掌握ajax或者axios，这两种都是前端与后端之间传递信息的工具。

环境

工欲善其事,必先利其器 所以在正式开发 vue 之前需要搭建其所需要的工具和环境。

1、前端开发工具：选择是 visual studio code Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com

2、nodejs环境： v14.21.3 Index of /download/release/v14.21.3/https://nodejs.org/download/release/v14.21.3/

3、官方文档：Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

Vue简介

Vue作者

Vue 框架诞生于2014年，他的作者是一名中国人–尤雨溪(江苏无锡人)

• 2013 年的时候他还在 Google就职时，受到 AngularJS的启发，尤雨溪开发了一款轻量级框架 Seed。同年12月 Seed更名为Vue，版本号为0.6.0。

• 2014年Vue正式对外发布，版本号为0.8.0。

• 2015年10月27日 正式发布Vue 1.0.0。

• 2016年10月1日 正式发布Vue 2.0.0。

1. 我现在分享的就是Vue2.X版本。 Vue 2.X 的核心就是利用 ES5 的 Object.defineProperty() 实现数据变动侦测

   Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

vue认识

什么是vuejs？官方给自己的定义：

Vue 是一套用于构建用户界面的渐进式框架

什么是渐进式？官方给的介绍：Vue可以是自底向上的逐层应用。简单来说，如果我们需要的完成的是一个简单的应用，那么很简单，只需要引入一个轻量小巧的核心库就行。如果需要完成的是较为复杂的应用，可以引入各种各样的Vue插件库以帮助完成应用的开发。

vue-cli搭建

 

​
CMD执行命令
执行： npm install -g @vue/cli​
查看版本： vue -V  /  vue --version​
创建一个新项目：  vue create projectName
​
选择初始化配置（如何此时选中的是Default 那么就是一个最基本的核心配置库）
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)	系统默认的3.X版本
  Default ([Vue 2] babel, eslint)	系统默认的2.X版本
> Manually select features			手动配置	√


 (*) Babel                              JavaScript 编译器（默认已选择）ES6 转 ES5 
 ( ) TypeScript                         超集
 ( ) Progressive Web App (PWA) Support  渐进式 Web 应用
 (*) Router                             Vue 路由   √
 (*) Vuex                               Vue 状态管理  √
>(*) CSS Pre-processors                 CSS 预处理器  √
 (*) Linter / Formatter                 代码风格检查和代码格式化（默认已选择）  
 ( ) Unit Testing                       单元测试
 ( ) E2E Testing                        端到端测试
​

选择一个Vue.js版本，你想开始项目(使用方向键)
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x                       
​

Router 选择路由模式，这里有两个选项（Y/n）：
  Y：使用 history mode，URL 中不带有 # 符号，但是需要后台配置支持    √
  n：使用 hash mode，URL 中会带有 # 符号，但 # 符号并不包含在 HTTP 请求中  
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y


选择一个CSS预处理器 ，
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)        sass.css 
> Less                              less.css √
  Stylus


选择 ESLint和配置  
? Pick a linter / formatter config:
  ESLint with error prevention only 只有ESLint
  ESLint + Airbnb config
> ESLint + Standard config          标准配置 √
  ESLint + Prettier


选择检测时间
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save                  保存时检测   √
 ( ) Lint and fix on commit        提交时检测


选择在什么位置保存配置文件
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files        独立保存为 config 文件  √
  In package.json                  全部保存在 package.json 文件


选择是否保存本次配置以便于下次使用
? Save this as a preset for future projects? (y/N) N


​
​
输入vue2.X  启动命令 `npm run serve`

项目生成后目录文件

 

配置项

UI框架

前端开发过程中有很多UI框架以供选择，例如：

饿了吗：Element-UI Element - The world's most popular Vue UI framework

阿里： And Design Ant Design Vue

以Element-UI为例

npm i element-ui -S
​
// main.js 中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

之后可以在页面上进行框架的开发。

axios

交互使用 Axios Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

 npm install axios
 
 import axios from 'axios'
 Vue.prototype.$axios = axios