从零开始搭建Vue项目

1. 首先安装 node、vue、vue-cli

初始流程.jpg

2. vue-cli 自动化搭建项目，命令行如下：

    vue init webpack first-vue-project

其中，first-vue-project 是项目目录名称

项目初始化.png

3. 进入项目文件夹，运行项目命令

    vue run dev

运行项目.png

4. 查看运行效果

效果.png

5. 使用 scss 语法需要用到 node-sass、sass-loader 两个插件

scss 插件

6. 修改本地端口与 本地查看 dist 文件效果的配置

由于 :8080端口经常被占用，所以我们需要修改本地端口。另外 生成的 dist 文件夹下的 index.html 运行时没有效果的，查看控制台发现是 静态文件引入路径错误，所以我们将 config配置文件中的绝对路径/改为相对路径./。

image.png