这里讲解下如何构建一个VUE项目,让想了解如何搭建一个VUE项目的朋友,能够更清新是如何搭建的,本节只说如何搭建,并跑通,后面的博文中我会更输入的讲解,如何构建一个成熟的项目,从开发环境、到上线部署,心急吃不了热豆腐吗~~

以下介绍都是基于MacOS系统,Win系统请自行准备环境
Mac下常用的工具 brew 工具,安装步骤见 https://brew.sh/

一、准备篇:

1. Nodejs 安装 
    1.1 brew install npm // 如果npm 已经安装完毕,忽略此步骤
    1.2 安装完后,命令:npm -v ,查看版本号,你发现只有6.2 版本,但最新的是 6.3,具体两版本有何不同,看文档升级详情,不做详述
    1.3 npm 更新到最新版本 ,  命令: npm install npm@latest -g

NPMJS 官方文档: https://docs.npmjs.com/getting-started/updating-global-packages
Vue 脚手架介绍 https://cli.vuejs.org/zh/guide/

   我总结的一句话介绍Vue的脚手架:一个插件丰富的基于webpack工具来构建个人项目,并依附于cli-service运行,有可视化界面的vue管理工具,让你不需关注配置,只关注应用编写即可

wewrewrrre

2. 安装VUE 项目构建工具
npm install -g @vue/cli  ### vue 的命令行工具
npm install -g @vue/cli-service-global ### 为vue serve 开发提供全局扩展

二、项目构建篇:
1.通过VUE 脚手架创建一个 名为 brave-project 的项目

vue create brave-project 执行后,
让选择预处理器,这里选择babel
Please pick a preset: default (babel, eslint)

2.手动创建文件 vue.config.js
参考:https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8

3.项目代码运行

执行命令: npm run serve

备注: serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement),进行实时进行修改热加载,除此外,你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器 ,参考: https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

4. 跑起来项目:
   简单配置了下 vue.config.js
    module.exports = {
        // 选项...
        outputDir : 'dist', //build 时生成的生产环境构建文件的目录
        //assetsDir : '', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        indexPath : '/public/index.html',//指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
        //项目启动配置
        devServer: {
            host : 'localhost',
            port : 8083,
            //proxy: 'http://localhost:4000'
        }
    
    }

运行情况
111.png
项目目录
222.png