这段时间公司要准备开始用VUE,安装的过程中就遇到各种奇葩问题

1.Node.js安装

https://nodejs.org/en/download/

安装好noedeJS然后继续安装下一步

3、执行npm install --global vue-cli ,全局安装vue-cli

----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。

产生通过config命令设置默认下载路径:

npm config set registry https://registry.npm.taobao.org

然后再执行:

npm install --global vue-cli

4、安装后,检查是否安装成功

vue -V (在此注意V为大写)

5、使用vue建一个项目名叫“my-project”(vue init webpack my-project),注意项目名不能有大写。

----注:vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。

----webpack-simple 相对简单的,它根目录下才有个 webpack.config.js。

6、注意:

项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦)。

后两项为单元测试,可以选择No.

7、项目建立完成后,目录结构如下:

8、安装项目所需依赖,进入项目中:

npm install

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

9、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

10、使用npm run dev,便可以打开本地服务器实时查看效果(http://localhost:8080)

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

9、初始效果

10,退出监听,可以直接Ctrl+C,选择Y。

安装VUE教程的更多相关文章

  1. windows下安装vue教程

    前言:前段时间学习了下vue,也算是能简单开发了,今天就记录下怎么通过vue-cli来安装vue. 因vue是基于node环境的,如果你还不会安装的话,可以看下我的这个教程:安装node.js和npm ...

  2. 安装vue 教程

    安装教程:https://www.cnblogs.com/zhaomeizi/p/8483597.html

  3. npm安装vue详细教程(图片详解)

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  4. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  5. npm——安装教程、安装vue脚手架

    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...

  6. 使用NPM安装Vue项目

    使用NPM安装Vue项目步骤如下: 一.先安装node.js,下载node.js安装包,node.js安装成功之后,左击电脑左下角>运行>输入cmd,如下图所示: 二.点击确定进入,分别在 ...

  7. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  8. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  9. 1、windows安装npm教程 --参考自https://www.cnblogs.com/jianguo221/p/11487532.html

    windows安装npm教程   1.在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm:  nodejs 下的包管理器. webpack: 它主要用途是通过CommonJS 的语法把所有 ...

随机推荐

  1. TTTTTTTTTT TTTTT CF 229C 三角形数量

    题意: 有一个无向完全图(任意两个节点之间均有一条边),包含 n(1<=n<=10^6) 个顶点,现在有两个人A 和 B,A从这个无向图中取出 m(0<=m<=10^6) 条边 ...

  2. hdu_1712(dp,背包)

    hdu_1712 \[dp[i][j]\] 表示前i个物品用了j天得到的最大收益 \[ dp[i][j] = max(dp[i-1][j],dp[i][j-k]+ k*v[i][k]) \qquad ...

  3. CF1213F Unstable String Sort

    题目链接 问题分析 题目实际上是一堆大于等于的约束.观察这\(2n-2\)个约束.第一组可以将要求的排成一个不降的序列,然后第二组就是在第一组的基础上再添加条件. 不妨设第一组生成的不降序列是\(\{ ...

  4. Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2) G1. Into Blocks (easy version)

    题目:https://codeforc.es/contest/1209/problem/G1 题意:给你一个序列,要你进行一些操作后把他变成一个好序列,好序列的定义是,两个相同的数中间的数都要与他相同 ...

  5. ping不通服务器就邮件警告

    ping不通服务器就发一封邮件 (单台) vim /root/scipt/1.sh #!/bin/bash ping -c 4 192.168.0.116 &> /dev/null #p ...

  6. python学习之路(2)(渗透信息收集)

    scapy的用法 通过目标ip的回复判断目标ip主机的情况 先写上三层的IP 四层的TCP 然后r.display看一下我们的包 src是源ip dst是目标ip 我们添加目标ip 这里是网关的ip ...

  7. Atcoder ARC101 E 树dp

    https://arc101.contest.atcoder.jp/tasks/arc101_c 题解是也是dp,好像是容斥做的,但是看不懂,而且也好像没讲怎么变n^2,看了写大佬的代码,自己理解了一 ...

  8. [CSP-S模拟测试]:小L的数(数位DP+模拟)

    题目传送门(内部题132) 输入格式 第一行一个整数$t$. 接下来$t$行每行一个整数$n$. 输出格式 $t$行,每行一个整数表示答案. 样例 样例输入: 41818231232691052109 ...

  9. git多人参与的项目 -> 分支代码如何合并到主干

    个人理解:合并分支时候就是当前分支,与别的分支先合并一遍,然后解决分支中存在的所有冲突,之后将本地分支代码提交到git远程仓库,之后切换主干分支 ,将主干分支与分支内容合并,解决冲突, 在提交主干分支 ...

  10. Struts2理解?

    (1)Struts2是一个基于MVC设计模式的Web应用框架,在MVC设计模式中Struts2作为控制器(Controller)来建立模型与视图的数据交互. Struts 2以WebWork为核心,采 ...