zoukankan      html  css  js  c++  java
  • Vue2+Webpack创建vue项目

      相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道。MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的变化,代码变得更加容易维护。理想状态下,我们能直接在前后端分离的新项目中使用Vue.js更为合适。这样能最大程度上发挥Vue.js的优势和特性,熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上,Vue.js压缩后只有18KB,而且没有其他的依赖。正是由于vueJS轻量、易上手,所以很多前端从事工作者都选择vueJS框架,使用vue创建项目需要搭建node环境,下面我将给大家介绍如何从搭建node环境到创建vue项目的整体步骤

    node环境搭建

      你可以在https://nodejs.org/en/ 官方网站下载安装包,然后进行安装。如果是 linux 或者 mac 命令行的用户,也可以使用命令行安装。

    mac安装node

      如果你没有安装 brew 包管理器,可以直接使用下面的命令安装:

     1 curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*).pkg</a>.*|1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

      如果你安装了 brew 包管理器,用下面的命令安装:

       1 brew install node 

    linux安装node

      请参考官方网站的文档操作 命令行安装 nodejs

      安装完成后再命令行输入node -v ,如果出现版本号则说明安装成功。

    特别提醒:

      windows环境下安装要配置环境node,不过也可以默认不改。具体怎么配置请参照我给我的连接地址 https://www.jianshu.com/p/03a76b2e7e00 学习 。到这里我已经默认你的node环境安装成功,并且环境配置都已经弄好,接下来就要使用vue闯将项目了,但是在创建项目之前需要安装vue的脚手架vue-cli,安装命令如下;

     1 npm install vue-cli -g 

    说明;

      npm是nodejs的官方包管理工具,安装如何项目所依赖的包文件都可以借助npm install 命令安装;

      vue-cli是vue的脚手架,用于vue项目的创建;

      -g是安装搭配全局目录,默认的全局目录在c盘,一般在安装node的时候都会配置node环境,修改node的全局目录

    vue安装完成

      在命令行输入 vue - v如果出现vue的版本号则说明vue已安装成功。在安装vue项目需要的脚手架之后我们就可以借助vue的脚手架vue-cli创建项目。

    vue项目创建

      1、创建一个项目文夹vue,在命令行敲击命令 cd vue

      2、创建基于webpack模板的vue项目,命令如下:

       1 vue init webpack vue_demo 

      注意:

      接下来命令行会出现一系列问题,你只需要一路回车就好,当然也要根据自己的具体情况惊醒修改,选择y/n;

      3、敲击命令 cd vue_demo 文件夹

      4、在命令行一依次输入以下命令:

    npm install 
    
    npm run dev

      5、在浏览器中输入localhost:8080就会出现如下界面。到这里,基于vue框架的项目已经建立完成,接下来只需要在组件中编写自己的代码就ok;

  • 相关阅读:
    Linux效劳器装机安全快速进阶指南(6)
    VLC 0.8.6b
    Mesk:简洁而朴实的音乐播放器
    OpenOffice.org最先支持微软docx等技俩
    Rawstudio-轻松转换 RAW 图片
    Transmission 0.70
    Openoffice3.0: 微软Office的解散者?
    AcetoneISO:Linux 下的“Daemon Tools”
    OpenOffice3将支撑PDF编纂及ac琐屑
    Linux的主动实行措施cron和crontab(1)
  • 原文地址:https://www.cnblogs.com/hexiaobao/p/8384643.html
Copyright © 2011-2022 走看看