这段时间公司要准备开始用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. py脚本修改后自动重启

    在用socket.io, pika之类启动一个脚本死循环做server或者client的时候: 1脚本被编辑之后,是不会自动重启 2当代码报错的时候,会立即退出, 只能手动重新运行 python ap ...

  2. FFT用于高效大数乘法(当模板用)

    转载来源:https://blog.csdn.net/zj_whu/article/details/72954766 #include <cstdio> #include <cmat ...

  3. 使用word2vec对中文维基百科数据进行处理

    一.下载中文维基百科数据https://dumps.wikimedia.org/zhwiki/并使用gensim中的wikicorpus解析提取xml中的内容 二.利用opencc繁体转简体 三.利用 ...

  4. classpath说明

    概念解释: classpath : 即项目中WEB-INF下面的classes目录; 应用: [01] src路径下的文件在编译后会放到WEB-INF/classes路径下.默认的classpath是 ...

  5. vue中使用iconfont和在旧有的iconfont中添加新的图标

    todo 使用参考:https://blog.csdn.net/qq_34802010/article/details/81451278 大体步骤是正确的,具体可参考官方文档和下载下来的代码中的dem ...

  6. xpath元素定位方法

    XPath 使用路径表达式来选取 XML 文档中的节点或者节点集.这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似.XPath 含有超过 100 个内建的函数.这些函数用于字符串值.数值 ...

  7. es6 字符串 对象 拓展 及 less 的语法

    es6 字符串 对页面渲染的几种方式:字符串拼接 文档碎片 dom操作 模板 es6 又提供了一种新的对页面渲染的方式:字符串模板(高级版的字符串拼接) 模板字符串标识符是 反引号 ( `` ) 英文 ...

  8. 使用matlab画半透明椭圆

    先上最终效果图: 本来是想直接用scatter和alpha来画的,结果在尝试以下代码后,发现无法显示透明效果 scatter(rand(1000,1),rand(1000,1), 'filled'); ...

  9. RabbitMQ问题解决

    1.访问http://localhost:15672/#/,输入用户名.密码登录报错500 解决方法:在快捷程序处找到RabbitMQ Service -stop停止服务,然后再点击RabbitMQ ...

  10. pycharm修改代码后第一次运行不生效解决

    问题: 用pycharm每次修改代码后第一次运行还是原来的结果,运行第二次的时候才是修改后代码的结果 解决: 每次修改代码后保存一下即可解决