• 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;

  • 相关阅读:
    hdu 1869 六度分离
    hdu 1181 变形课
    hdu 1874 畅通工程续(Floyd)
    07-图5. 旅游规划(25)
    hdu 2544 最短路
    hdu 1874 畅通工程续
    00-自测5. Shuffling Machine (20)
    程序员高效率工作必备工具
    Beyond Compare 如何进行韩文比较
    Beyond Compare如何展开所有子文件夹
  • 原文地址:https://www.cnblogs.com/hexiaobao/p/8384643.html
Copyright © 2020-2023  润新知