前端开发环境搭建：新版Vue+脚手架Vue-Cli4.3安装讲解以及目录结构讲解

什么是Vue

目前前端最主流框架，套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

文档地址： https://cn.vuejs.org/

建议先安装node.js和npm修改为淘宝镜像，这样在下载vue时可以节省一些时间。没有配置过的可以看我发布的博文有教程

安装新版Vue（直接使用cli）

npm install vue（可以不用）

什么是VUE-CLI

Vue提供了一个官方的CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架

安装新版Vue-CLI

注意使用管理员形式控制台

cnpm install -g @vue/cli

cnpm install -g @vue/cli-init

安装好两个命令后输入vue查看是否安装好

在这里插入图片描述

使用Vue-Cli创建项目

测试项目，验证vue环境

选择y后回车，会持续下载包

vue create my-project

在这里插入图片描述

完成创建后
在这里插入图片描述

输入命令

cd my-project

npm run serve 注意！是serve 不是server 一开始我就输错了研究半天…

在这里插入图片描述

windows控制台使用VueCli搭建vue项目

Step1：在对应目录shift加鼠标右键打开powershell管理员控制台

Step2：创建项目

vue create xdclass_front
上下键选择第三个回车
之后选择以下选项 空格选中
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
❯◉ Vuex
 ◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

在这里插入图片描述

输入n，选择hash路由

再回车

然后再输入n，意思就是以后创建项目是否默认上面选择的配置
在这里插入图片描述

之后就开始创建依赖包了，然后使用对应工具打开就可以了

Step3：安装axios 用于发http请求

打开终端输入命令：cnpm install axios --save

可以查看package.json是否存在axios包

如果依赖包是生产环境下使用的话，使用以下命令

cnpm install <package_name> --save-dev

表示将这个包名及对应的版本添加到 package.json的 devDependencies

Step4：添加cube-ui依赖（输入y进行安装）构建移动端界面

vue add cube-ui

Step5：启动命令

cnpm run serve

cnpm install：安装依赖包命令需要权限

目录讲解

在这里插入图片描述

使用cdn引入vue

创建空文件夹即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>

{ {}}

文本插值

里面JavaScript 表达式支持

{
       
       {5+5}}
{
       
       { message.split('').reverse().join('') }}

Vscode里面快速打开html
- 安装 Live Server 插件