详解使用nodeJs安装Vue-cli

前提：nodeJs本地已安装。

1、执行npm install --global vue-cli ，全局安装vue-cli

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

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

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

然后再执行：

npm install --global vue-cli

2、安装后，检查是否安装成功

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

3、使用vue建一个项目名叫“my-project”（vue init webpack my-project），注意项目名不能有大写。

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

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

4、注意：

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

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

5、项目建立完成后，目录结构如下：

6、安装项目所需依赖，进入项目中：

npm install

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

7、进入项目目录文件夹（my-project）中，就可以使用vue进行开发啦

8、使用npm run dev，便可以打开本地服务器实时查看效果（localhost:8080）

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

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

9、初始效果

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue学习笔记进阶篇之vue-cli安装及介绍

    Vue学习笔记进阶篇之vue-cli安装及介绍

    介绍 Vue-cli是Vue的脚手架工具 主要作用:目录结构.本地调试.代码部署.热加载.单元测试 地址:https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli 当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了. 安装完成后,在终端输入以下命令, 可以查看vue的版本:vue -V 输入以下命令,可以查看官方提供的模板: vue list 我们可以看到,vue官方提

  • 详解在vue-cli项目中安装node-sass

    详解在vue-cli项目中安装node-sass

    1,使用save会在package.json中自动添加. npm install node-sass --save npm install sass-loader --save 2,通常使用npm安装会出现以下报错,安装失败.(网路问题) 3,可以通过淘宝的npm镜像安装node-sass,解决以上问题. npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) cnpm install node-sass -

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • 详解使用nodeJs安装Vue-cli

    详解使用nodeJs安装Vue-cli

    前提:nodeJs本地已安装. 1.执行npm install --global vue-cli ,全局安装vue-cli ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器. 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 然后再执行: npm install --global vue-cli 2.安装后,检查是否安装成功 vue -V (在此注意V为大写) 3.使用v

  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法 通过全局安装vue-cli npm install --global vue-cli 在cmd中运行vue提示不是内部命令,原因是环境变量没有加上 找到npm的位置:(不在这个位置的全局搜索vue.cmd即可) C:\Users\Administrator\AppData\Roaming\npm 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置,保存,重启cmd命令工具即可

  • 详解使用Nodejs内置加密模块实现对等加密与解密

    加密与解密是保证通讯安全的一种重要手段,现在加密算法已经有很多,并且都有成熟的软件包可以使用,这就大大降低了应用开发程序员的负担,只需要使用这些第三方提供的加密解密库就可以使用了,在Node.js中其实提供了一个非常强大而且方便的加密与解密模块crypto,我们不需要使用第三方的NPM库就能实现简单的加密与解密功能,毕竟使用加密与解密的目的就是为了保证通讯的安全,而使用非官方的第三方库总是有可能存在添加的后门或者什么的,而使用Node.js自带的crypto模块就能最大程度的保证加密的安全性.

  • 详解Vue-Router的安装与使用

    目录 安装 路由的基础配置 将Router安装到Vue中 Router的相关配置 Router.routes 的相关配置 实现一个简单的路由 1.配置路由 2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件 安装 1.在已有Vue项目中手动安装vue-router npm install --save vue-router 2.使用vue-c

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • 详解python环境安装selenium和手动下载安装selenium的方法

    方法1:cmd环境下,用pip install selenium 可能会很慢 方法2:下载selenium安装包手动安装 下载地址:https://pypi.org/project/selenium/ 选择扩展名为gz的源码包进行下载 下载后解压,cmd环境进入到setup.py文件所在目录 运行 python setup.py install命令进行安装 安装完后用pip list可看到selenium的信息 此时就可以用import selenium引入selenium包了 到此这篇关于详解

  • 详解anaconda离线安装pytorchGPU版

    在网速不好的情况下,如何用离线的方式安装pytorch.这里默认大家已经安装了anaconda了. 安装Nvidia驱动.cuda.cudnn等依赖 首先安装vs社区版,如果已经安装过可以跳过这一步,下载地址 安装以下两个组件即可,不用全部装上. 之后安装nvidia驱动,注意自己显卡和驱动的对应关系,下载地址 我的显卡是940M,对应如下选项: 安装cuda 这里要注意查看驱动和cuda的对应关系,首先查看自己下载的驱动文件名, 可以看到最开始有个数字,这个就是驱动版本,和cuda会有下图类似

  • MySql8.023安装过程图文详解（首次安装）

    MySql8.023安装过程图文详解（首次安装）

    首先下载安装包Mysql官网下载地址,Mysql是开源的,所以直接下载就行了. 这是下载步骤: 然后选择: 因为个人使用原因,我选择了这个: 下载之后,解压下载得到的安装包放在自己喜欢的位置,然后设置环境变量: 我是win10系统,就是此电脑-属性-高级系统设置-环境变量: 在系统变量中双击Path,再点击新建: 把解压后的bin目录所在的路径复制进去就行了! 然后重要的一步就是:在解压后的根目录下,新建一个文本文档文件,后缀名改为.ini 如图所示: 以文本文档打开my.ini,写入以下内容

  • 安装@vue/cli报错npmERR gyp ERR问题及解决

    安装@vue/cli报错npmERR gyp ERR问题及解决

    目录 安装@vue/cli报错npmERR gyp ERR 最终解决方法 安装@vue/cli报错npmERR gyp ERR npm ERR! path C:\Users\wwc\AppData\Roaming\npm\node_modules@vue\cli\node_modules\utf-8-validateERR! gyp ERR! find VS 报错图片 安装命令: npm i -g @vue/cli 先卸载掉安装失败的包 npm uninstall -g @vue/cli 删除本

  • 详解vue-cli 脚手架 安装

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/ 注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上: 二. vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令:vue

随机推荐