Vue+webpack搭建一个前端项目

Vue搭建一个项目


Vue.js,React.js,angular.Js(排序根据github排名)是当前最主流的前端框架,号称前端三剑客！！！前端组件库相当多,还有Bootstrap、jQuery UI、BootMetro、AUI、nodejs等等。


这里主要介绍Vue这个牛逼的框架,当然三剑客本质上都是基于JS的编程,所以要实现页面还需要UI框架。常见的UI组件库也有很多,比如QUICK UI、element-ui，IView等。


后面将会介绍使用VueJs+Element-ui实现项目管理系统。


本片介绍搭建Vue的项目环境。


环境: Centos7




引入式: 直接在首页引入   
优点: 简单快捷方便
缺点: 万一这个网点挂了(虽然概率极低),又或者自身去这个点的网速极差都是会影响用户体验,说白了这种方法就是把家伙托管到第三方处,虽然方便但是命根子没掌握在自己手中。


第二种下载本地


使用npm安装(官方推荐: 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。)


在此之前须先安装nodejs
下载地址    https://nodejs.org/download/release/v11.12.0/node-v11.12.0-linux-x64.tar.gz
直接解压后即可使用


安装vue    /usr/local/node/bin/npm install vue  就这样安装完成。


新建一个项目   vue init webpack  '项目名'


会有一些选择,选择vue-router,选择适应npm管理,其他全部yes,这时候就会自动下载项目依赖的相关包。


测试启动命令   npm run dev    在config/index.js可以修改监听的地址和端口


生产环境       npm run build  会生成名为dist目录的静态文件,直接使用nginx代理index.html即可


ok Vue的项目搭建完成,后面会详细介绍些自己使用vue的心得。






·