文档章节

安装vuejs全过程、淘宝镜像

h
 hhj187
发布于 2016/10/18 14:40
字数 559
阅读 363
收藏 1

小技巧:由于npm是国外的,所以使用淘宝镜像,把命令粘过来

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

我: 

以后用npm的地方就用cnpm替换

看cnpm装上了吗:  cnpm -v 或npm ls cnpm -g 

我:

安装完cli后再输入vue就可以看到vue本身变成了一个命令:

然后:在F盘的workplace文件夹,打包my-frist-vue-project

vue init webpack my-frist-vue-project

我:

此时,在当前文件夹(F:\workplace)下,多了个《my-frist-vue-project》

我们进来看一下——在cmd里输入:cd my-frist-vue-project 再输ls就可以查看《my-frist-vue-project》里有哪些东西了:

我们下载了这个项目也不能跑起来,因为我们要先装它的依赖。依赖必须和package.json文件装在同一目录,所以先type package.json看一下当前目录有没有package.json文件。然后用npm install就可以安装所有依赖了:

我:

把依赖(npm install)安装在F:\workplace\my-frist-vue-project目录,依赖装好后多了个node_modules目录。

跑一下这个项目:命令npm run dev

此时,服务器就启动了,端口是:localhost:8080自动出来http://localhost:8080/的网页。网页效果:

这是vue的模板。这套脚手架工具就算搭建成功了。

 

接下来要做的就是在《my-first-vue-project》文件夹的《src》里进行具体的项目开发,其它的文件夹都不用关注。

 

《src》里的App.vue文件有热更新,在文件改了(本例to改成"to2")之后保存,点webstrom的浏览器图标,发现网页会自动更新,这是脚手架工具所提供的一个功能。

 

 

 

通过webstorm中的File Types配置(Preferences > Editor >File types) 将.vue格式的文件注册为HTML文件类型(在HTML里加*.vue),这样html中的代码提示也会被用到.vue上;

不对,不能把*.vue放HTML里,因为VUE的*.vue就自动没了(用webstorm打开后缀vue文件时,由于VUE的*.vue没了,所以浏览器就变成下载.vue文件了)

 

sublime可以热更新 而webstorm不能热更新:解决:

webstorm保存的时候会先保存到旧时文件中,其实并没有真正保存,要在setting->stystem settings下的“use save write”去掉,如图:

 

 

 

© 著作权归作者所有

h
粉丝 1
博文 84
码字总数 12457
作品 0
天津
私信 提问
vue如何新建一个项目(超详细哦)

vue创建项目(npm安装→初始化项目→发布) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序(CMD),检查是否正常 ...

程序员是粉色的
2018/05/27
0
0
本地运行github上的vue2.0仿饿了么webapp项目

在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教程:http://coding.imo...

祈澈菇凉
2018/09/05
0
0
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
235
0
Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.js→ cnpm(淘宝镜像,节省安装时间)→ we...

一墨编程学习
2018/07/11
0
0
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一

最近自己做了一个vue做前端,nodejs做后的完整项目,在此过程遇到的问题和收获的心得分享出来,希望能和大家交流探讨。 项目搭建步骤 1.首先要确保计算机上安装了nodejs环境,才能进行以下步...

Tang5ge
2018/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cleanLastUpdated.bat

@echo offrem create by AnXiaole rem 这里写你的仓库路径set REPOSITORY_PATH=C:\Users\AnXiaole\.m2\repositoryrem 正在搜索...for /f "delims=" %%i in ('dir /b /s "%REPO......

安小乐
19分钟前
5
0
操作放大器的用法是什么?

  有区别   1、单级放大的倍数比较有限,一般在100倍以下。放大倍数很大的话,负反馈就比较浅,对于放大倍数的稳定性不利。假如需要放大倍数更高,就不得不动用多级放大电路了。单级放大...

仙溪
22分钟前
3
0
c++ 上传文件 curl

bool uploadFile(std::string url, std::string file, std::string auth) { boost::filesystem::path p(file); CURL *curl; CURLcode res; struct curl_httppost *for......

青黑
28分钟前
3
0
冒泡与插入排序的代码实现

// 冒泡排序,a 表示数组,n 表示数组大小public void bubbleSort(int[] a, int n) { if (n <= 1) return; for (int i = 0; i < n; ++i) { // 提前退出冒泡循环的标志位 ...

无名氏的程序员
30分钟前
4
0
centos7.6 +mhvtl1.6安装

以前的mhvtl都是在centos6.x,5.x上安装的mhvtl以前版本为1.4,现在最新的1.6出来,可以安装在centos7.6上,下面是安装过程: 1.安装基础包 centos7.6只要能上外网,默认是配置了yun源的,这些...

突突突酱
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部