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
包管理器,用下面的命令安装:
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项目的更多相关文章
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 离线webpack创建vue 项目
参考地址: https://blog.csdn.net/feinifi/article/details/104578546 画重点: // 需要带上参数--offline表示离线初始化. --offl ...
- 用 webpack 创建 vue 项目
1.安装支持webpack 包 npm i -D webpack webpack-cli aspnet-webpack webpack-dev-middleware webpack-hot-mi ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 通过脚手架创建Vue项目
第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...
- Linux下创建vue项目
前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...
随机推荐
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
- MyBatis源码解析之日志记录
一 .概述 MyBatis没有提供日志的实现类,需要接入第三方的日志组件,但第三方日志组件都有各自的Log级别,且各不相同,但MyBatis统一提供了trace.debug.warn.error四个级 ...
- C#设计模式六大原则——接口隔离
接口隔离定义: 一般有两种定义: 1:客户端不应该依赖他不需要的接口 2:类间的依赖关系应该建立在最小的接口上 我们在建立接口时,应该尽量建立单一,不臃肿庞大的接口,应尽量使接口细化,方法尽量 ...
- 纠错帖:Zuul & Spring Cloud Gateway & Linkerd性能对比 (转载)
纠错帖:Zuul & Spring Cloud Gateway & Linkerd性能对比 Spring Cloud Spring Cloud Spring Cloud Gatew ...
- 关于pycharm 打不开某些文件夹和文件打不开的问题
在使用pycharm的时候遇到了一个情况, 下载了一个文件,自己修改了文件夹名称后再打开文件夹里的py文件, 打不开了,pycharm没有反应, 百度了一下,没有类似的问题,觉得应该是个个例... 然 ...
- php 截取字符串指定长度
---恢复内容开始--- 一.直接取整,舍弃小数,保留整数:intval(): intval(9.21); /*结果是9*/ intval(9.89); /*结果是9*/ intval(string) ...
- Android布局属性
LinearLayout布局: 线性版面配置,在这个标签中,所有元件都是按由上到下的排队排成的.在这个界面中,我们应用了一个 LinearLayout的布局,它是垂直向下扩展的 ,所以创建的布局XML ...
- Dialog向Activity传递数据
PopupDialog中声明一个内部接口PriorityListener,接口中声明一个回调函数refreshPriorityUI,用于在 Dialog的监听事件触发后刷新Activity的UI显示. ...
- Pig sample用法举例
some = sample data 0.1 遍历整个数据集,获取指定比例的行数的数据,获取的数据不确定,条数也不准确. 内部重写为filter data by random() <= ...
- maven 配置jdk版本编译
在maven的默认配置中,对于jdk的配置是1.4版本,那么创建/导入maven工程过程中,工程中未指定jdk版本. 对工程进行maven的update,就会出现工程依赖的JRE System Lib ...