Vue项目搭建过程
环境搭建:mac+nodejs+npm
#安装node.js : $ brew install node
#安装vue-cil: $ npm install -g vue-cli
注:
官网下载安装node.js:https://nodejs.org/en/mac-使用brew安装软件
优化:
使用国内镜像提升下载速度:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -d
安装 nrm 自由切换 npm 源 $ cnpm install nrm
使用nrm:
$ nrm ls
$ nrm use **
构建项目:
安装vue $ npm install vue@2.1.
全局安装 vue-cli $ npm install --global vue-cli
创建新项目 $ vue init webpack my-project
进入项目目录 $ cd my-project
注:主要用的包都在package.json文件中
安装依赖 $ npm install
注:会发现多了一个node_modules目录,,里面就是项目依赖包资源
运行项目 $ npm run dev
打包项目 $ npm run build
测试打包项目:安装一个http-server服务 $npm install http-server -g使用:cd dist http-server -p 3000
注意:
去掉打包时生成的 map 文件:将 /config/index.js 文件修改为:productionSourceMap: false
安装组件:
安装 vue 路由模块 $ npm install vue-router -D
安装网络请求模块 $ npm install vue-router vue-resource --save
支持scss 文件预编译
$ npm install sass-loader -D
$ npm install node-sass -D
支持jquery $ npm install --save jquery
安装一个ajax接口请求工具 $ npm install axios -D
Vue项目搭建过程的更多相关文章
- Vue项目搭建完整剖析全过程
Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~! 项目技术栈:vue+webpack+bower+sass+axios ...
- Vue项目搭建流程 以及 目录结构构建
Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...
- Vue项目搭建与部署
Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...
- vue项目搭建 (二) axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
- vue项目搭建 (一)
vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以 ...
- vue项目搭建介绍01
目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...
- vue项目搭建介绍02
目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...
- 利用vue-cli3快速搭建vue项目详细过程
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- vue企业项目搭建过程(vue-cli脚手架超详细教程 傻瓜-入门)
vue作为现在主流的前端框架,有必要学习一下. vue的官方文档还是不错的,开源中文,一个爽字形容. 如果不是实际开发需要vue-cli构建项目,那么可以在加一个爽. 然而要构建的时候发现官方文档还是 ...
随机推荐
- 适配chrome65最新selenium-chromedriver
网盘地址:https://pan.baidu.com/s/1BmdwRgD96IL32-3FTFxPSg 密码: 2vg6
- 第五篇 Flask组件之SQLAchemy及Flask-SQLAlchemy插件/Flask-Script/Flask-migrate/pipreqs模块
SQLAlchemy组件 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然 ...
- 跟浩哥学自动化测试Selenium -- 浏览器的基本操作与元素定位(3)
浏览器的基本操作与元素定位 通过上一章学习,我们已经学会了如何设置驱动路径,如何创建浏览器对象,如何打开一个网站,接下来我们要进行一些复杂的操作比如先打开百度首页,在打开博客园,网页后退,前进等等,甚 ...
- Codeforces Round #495 (Div. 2) Sonya and Matrix
正常没有正方形的限制下,值为i的点个数4i 那么从0开始遍历,第一个不为4i的值就是min(x, y) 由于对称性我们姑且令x为这个值 我们先列举n*m=t的各种情况 对于一对n, m.我们已经知道n ...
- 【wx:if】小程序条件渲染的使用说明
语法,以view为例: <view xw:if="{{条件}}">aaaa</view> <view xw:elif="{{条件}}&quo ...
- 【转】: 探索Lua5.2内部实现:虚拟机指令(3) Upvalues & Globals
在编译期,如果要访问变量a时,会依照以下的顺序决定变量a的类型: a是当前函数的local变量 a是外层函数的local变量,那么a是当前函数的upvalue a是全局变量 local变量本身就存在于 ...
- OSI七层协议模型及OSI参考模型中的数据封装过程
转载自:http://blog.csdn.net/qq_14935437/article/details/71081546 OSI模型,即开放式通信系统互联参考模型(Open System Inter ...
- NFS服务搭建使用
需求:由于线上业务有一些数据存在了Redis数据库和mysql数据库中了,导致了数据较大迁移起来比较麻烦,所以准备搭建NFS来做WEB的共享磁盘,存储这些数据. 服务端搭建: 查看本机关于nfs的包 ...
- 正确使用memset
今天做了一道素数打表的题我在使用一个数组记录是否为素数的时候使用了memset,将数组里面的数都清为1,代表是素数,不是素数,就改成0,我在判断这一个数是否为素数是依据也是是0还是1,结果一直存在问题 ...
- 第十八次ScrumMeeting会议
第十八次Scrum Meeting 时间:2017/12/8 地点:线上+SPR咖啡馆 人员:蔡帜 王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 赵晓宇 照片: 目前工作进展 名字 今日 明天的工 ...