美文网首页Vue
vue-cli+webpack搭建一个简单的前端框架

vue-cli+webpack搭建一个简单的前端框架

作者: 臻甄 | 来源:发表于2020-03-15 20:46 被阅读0次

    1. 安装开发环境

    sublime text3 https://www.sublimetext.com

    开发前端代码时所用的编辑器,按个人习惯和喜好下载,编译程序直接使用系统终端运行,可以不与编译器有联系。(在此强推最近上手的vscode,也有各种vue和前端开发插件)

    1. MacOS环境下可使用brew下载安装
    2. 添加Emmet插件(html语法补全)和Vue Syntax Hightlight插件(vue语法高亮)
    

    Node.js https://nodejs.org

    Node.js是能够在服务器端运行JavaScript的运行环境,内置npm包管理器,方便管理项目依赖的各种模块,编译代码,可使用node -v和npm -v查看版本,我是用nvm一键安装配套的node和npm(MacOS环境下)

    (1)安装nvm
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
    (2)安装node及npm(node v8.0.0 (npm v5.0.0))
    nvm install v8.0.0
    (3)将镜像源设置为淘宝镜像(不换的话速度慢得要死,大家时间都很宝贵的,通过npm config get registry查看当前镜像地址)
    npm config set registry https://registry.npm.taobao.org
    (4)node的依赖模块默认在~/.nvm/versions/node/v8.0.0/lib/node_modules下
    (5)测试Node和npm安装是否成功,安装Grunt
    npm install -g grunt-cli
    

    2. 安装全局模块

    vue

    npm install -g vue-cli
    

    webpack

    webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理

    npm install -g webpack 
    

    PS:若~/.nvm/versions/node/v8.0.0/lib/node_modules中已经有webpack了,说明在安装vue-cli的时候自动安装了,可以跳过这一步

    3.新建&&编译&&运行项目

    vue init webpack my-project
    cd my-project
    npm install
    npm run dev
    

    然后就可以在浏览器中打开http://localhost:8080看效果了

    参考

    参考两个github库

    1. vue-cli+webpack简单搭建一个vue脚手架
    2. 使用vue+webpack+element搭建的后台管理系统模板https://github.com/bailicangdu/vue2-manage

    相关文章

      网友评论

        本文标题:vue-cli+webpack搭建一个简单的前端框架

        本文链接:https://www.haomeiwen.com/subject/kaxvehtx.html