Vue2+Webpack创建vue项目

时间:2024-10-26 16:03:45

  相比较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 包管理器,用下面的命令安装:

   brew install node

linux安装node

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

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

特别提醒:

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

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项目,命令如下:

    vue init webpack vue_demo

  注意:

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

  3、敲击命令 cd vue_demo 文件夹

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

npm install 

npm run dev

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

Vue2+Webpack创建vue项目