【Vue课序1】保姆级：从零到一搭建VUE开发环境和启动项目

本文链接：https://blog.csdn.net/weixin_41753520/article/details/103121173

一、什么是 Vue

Vue 是一个用于构建用户界面的渐进式框架「注意读音类似于 View，作者的初衷也是让其起 View 的功能」，Vue 只注重视图层，这点和 React 的是一模一样的，Vue的特点：

简单、易用
灵活
高效

二、Vue 环境搭建

安装 node，使用 npm 和 yarn 首先要安装 node，可以去官网下载：`https://nodejs.org/en/download/current/`

下载对应版本，然后安装即可。

在Mac电脑上也可以通过 Homebrew 安装

brew install node

安装完 node 会自带 npm「node 的包管理器」,安装完成以后在命令行中输入

node -v

看到以下 node 的版本信息则表示安装成功了

:node -v
v12.13.0

使用 npm 安装 Vue

在命令行输入以下命令即完成安装

// 全局安装
npm install -g vue

如果出现报错请输入sudo或者在root身份下进行安装

sudo install -g vue

使用 vue-V 查看是否安装成功，如果显示出版本号则表示安装成功

:vue -V      // 一定要注意是大写的-V
2.9.6

使用 yarn「替代 npm 的包管理器」安装

要使用 yarn 必须先安装 yarn , 在这里我们使用 npm 安装 yarn

// 全局安装
npm install yarn -g

配置yarn环境变量，例如我的环境变量存放于 ~/.bash_profile ，通过vim指令编辑：

vim ~/.bash_profile

进行如下配置：

# yarn
export PATH="$PATH:`yarn global bin`"

使用 cli 「命令行工具」

我们除了上面的引用或安装 vue 外，还可以使用 vue-cli「脚手架工具」
vue-cli 是一个脚手架工具「就是一个工具集合，可以快速的创建一个 vue 项目」
同样使用 npm or yarn 来安装 vue-cli，我们全局安装

npm install -g vue-cli 
// 或者使用
yarn add -g vue-cli

安装完以后，我们输入 vue -V 查看是否安装成功，或使用 vue-list 查看
看到上面内容则证明我们的 vue-cli 脚手架工具安装成功了

三、使用 vue-cli 来创建一个项目

 cd git
 mkdir vue-demo
 cd vue-demo

2、使用 vue-cli 创建项目

vue init webpack firstvuedemo

这里的 vue 项目是基于 webpack 的，使用上述命令我就可以创建一个名为 firstvuedemo 的 vue 项目
当我们输入上述命令以后就会开始下载模版，然后会提示输入项目名「自己写一个即可」，完了一路回车，出现 yes就直接回车「目前先这样搞，别管为什么，但是如果看过辉哥的 react - antd pro教程就会了解，最后提示使用 npm 还是 yarn 来管理包，我选择的是 yarn 」

踩坑指南：在 Use Eslint Loader (y/n)？步骤时输入 n 再回车，否则选择了useEslint规范，从而导致不能随意Formmat排版，如果不小心选择了yes解决方案如下：

1.打开/config/index.js文件，找到：

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    
    // 将 true更改为false即可
    useEslint: false,

2.打开根目录的/.eslintrc.js

	// add your custom rules here
    rules: {
    // allow async-await
    
    // 配置如下
    'generator-star-spacing': 'off',
    'indent': ['off', 0],
     "space-before-function-paren": 0,

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }

当我们成功创建出了项目，如果大家使用 npm 或是 yarn 出现安装不了的情况，那么切换一下源即可「tabao 的源就非常不错」，我们根据上面的提示，进入到项目中，然后运行一下项目看看结果

3、运行项目

cd firstvuedemo
//然后运行
yarn run dev

我们就会看到使用 webpack 启动服务，然后编译，完成以后提示项目运行的地址默认是：http://localhost:8080
我们在浏览器中输入 http://localhost:8080 回车查看结果
怎么样，我们使用 vue-cli 就成功创建出一个 vue 项目，只不过他默认的主页是 Vue 的一些介绍，要搞成自己项目修改即可「后面说到 vue-cli 创建项目会说到的」，怎么样？脚手架创建项目简单吧。