Vue.js安装以及创建项目
来源:互联网 发布:linux不能初始化opengl 编辑:程序博客网 时间:2024/06/02 06:14
一.安装Vue.js
怎么搭建vue.js的环境呢?要搭建vue的环境需要借助node.js的npm的包管理器,所以先去看下NodeJS、NPM安装配置步骤。
(1).安装淘宝的npm镜像(可安装可不安装):
如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像。这个其实看个人爱好吧,因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。
(2).安装全局vue-cli脚手架、webpack:之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单
命令输入(--global这个可以简写成-g)
1.npm install -g vue-cli //全局安装vue-cli
2.npm install -g webpack //全局安装webpack
3.npm install -g webpack-dev-server //安装webpack的本地webserver
注意:如果装了安装淘宝的npm镜像时就把命令中npm换成cnpm
安装完成后,vue-cli脚手架其实就已经把vue也装掉了,所以只需输入vue -V 和 webpack -v 等等就可以查看安装成功与否。
二.创建项目
1.开始创建一个新项目
命令 : vue init webpack myVue(最后这个是我创建的项目文件夹的名字)
(1)输入vue init webpack myVue
(2)回车并回答如下问题,直到最后创建完成,
(3).一个vue项目自动创建成功,可到对应的项目存放路径中查看
三.运行项目
想要运行此项目,还需要装依赖文件node_modules
1.安装依赖,生成node_modules目录(安装依赖的代码库)
①注意前面的盘符是当前的,然后命令cd myVue //进入文件夹
②回车输入 npm install 你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。
2.运行项目
准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入 npm run dev 回车即可
运行”npm run dev”的时候执行的是build/dev-server.js文件,运行”npm run build”的时候执行(用来执行发布的)的是build/build.js文件,我们可以从这两个文件开始进行代码阅读分析
8080就是默认的端口,在浏览器地址栏中输入localhost:8080会发现默认的模块打开了!最后打开浏览器:127.0.0.1:8080出现下面这个就代表vue.js在本地就创建好了。
四.打包vue项目
打包就简单多了,直接输入 npm run build 就行了,打包后成功的文件,默认是存放在dist文件夹中,只需将此文件夹放入服务器即可
五.运行别人的vue.js项目domo
1.可以从github克隆下来,然后将项目文件夹放到某个盘符下(在这里我把官网的demo放在Vuedemo)
2.然后cmd命令 找到该盘符,找到文件 f:\cd Vuedemo
3.命令 npm install //在本地安装
最后 npm run dev 回车 //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。
- Vue.js安装以及创建项目
- vue.js学习笔记之安装以及项目的创建和运行
- vue.js创建项目
- 创建Vue.js 项目
- vue.js创建项目
- vue.js学es6_安装vue.js并创建vue.项目
- vue安装及创建项目
- 创建Vue项目 以及引入Iview
- 创建Vue项目 以及引入Iview
- vue开发环境搭建以及项目创建
- Vue-cli创建vue项目以及配置文件梳理
- 使用命令创建vue.js项目
- Vue.js快速创建项目并启动
- Webpack创建、运行vue.js项目
- Vue.js 2.X DEMO以及安装
- vue.js学习笔记(一)安装及项目的创建和运行
- vue cli脚手架工具安装以及搭建vue项目
- Mac Vue.js 安装并初始化项目
- Hibernate---helloworld入门程序
- mvc 上传图片及预览
- 剑指offer 计算机网络基础
- java中Runnable和Thread的区别
- UESTC
- Vue.js安装以及创建项目
- 父类和子类的相互转换及父类调用子类的方法
- Centos 下 Jenkins2.6 + Git + Maven Shell一件部署与备份
- 去掉^M符号,linux vi打开来自win环境下的文件,有^M的原因和解决办法
- List中的值的更新
- R语言-获取指定位置的数据
- 纯属记录一下 scrapy环境配置--基于python3.4
- 中国标准时间Mon, 24 Jul 2017 15:31:05 +0800格式化转换 js
- connection.getInputStream 抛出IoException