VUE项目从零到一的构建

这里讲解下如何构建一个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][1]：
项目目录
![222.png][2]

[1]: http://blogimg.bravedu.com/2018/08/3316421486.png
  [2]: http://blogimg.bravedu.com/2018/08/1440806573.png

BraveDu

VUE项目从零到一的构建

您可以选择一种方式赞助本站

发表评论