精华内容
下载资源
问答
  • 1、前置环境1、node.js2、vue-cli3、webstorm2、创建步骤1、在webstorm中打开一个终端,输入#vue ui运行结束后,会启动一个web服务用以可视化创建vue项目。![]...

    1、前置环境

    1、node.js

    2、vue-cli

    3、webstorm

    2、创建步骤

    1、在webstorm中打开一个终端,输入

    #vue ui

    运行结束后,会启动一个web服务用以可视化创建vue项目。

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703101701574-1742909461.png)

    2、主页是项目管理页面,选择项目文件夹

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102532031-2090490150.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102024153-180538586.png)

    3、点击创建新项目,选择一些基本配置

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102107519-1616749102.png)

    4、接下来依次选择按照提示进行配置

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102201089-633301233.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102202879-392078872.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102204381-872522764.png)

    5、保存预设可方便下一次创建新项目,不必进行重复配置

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102303948-1425289611.png)

    6、配置完成,正在生成项目

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102338906-1186288132.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102341233-1800870343.png)

    7、项目生成后,会给出一个URL,访问该URL即可进入项目控制面板

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102444835-93762718.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102619463-1455012654.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102633494-915824661.png)

    ![](https://img2018.cnblogs.com/blog/1522304/201907/1522304-20190703102624951-1064071997.png)

    展开全文
  • Vue构建项目 1、环境搭建 1.1、npm安装 下载nodejs并安装 按照提示进行安装操作,直至完成。 打开命令程序输入: node -v 如上图则为安装成功。 使用淘宝npm镜像 npm install -g cnpm --registry=...

    Vue构建项目

    1、环境搭建

    1.1、npm安装

    1. 下载nodejs并安装在这里插入图片描述

      按照提示进行安装操作,直至完成。

      打开命令程序输入:

      node -v
      

    在这里插入图片描述

    如上图则为安装成功。

    1. 使用淘宝npm镜像

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

    1.2、项目初始化

    1. 安装vue-cli

      全局安装 vue-cli

      cnpm install vue-cli -g 
      
    2. 检查vue-cli是否安装成功

      vue list
      
    3. 构建vue项目

      vue init webpack project_name
      
    4. 安装依赖

      cnpm install
      
    5. 运行项目

      cpnm run dev
      

    1.3、异常处理

    • 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。

    解决方法:

    1. 以管理员身份运行power shell ;
    2. 输入*set-ExecutionPolicy RemoteSigned* 然后输入A 回车。
    展开全文
  • Vue安装步骤教程(详细)

    千次阅读 2019-12-13 15:26:37
    这个项目的目录和结果(如果是第一次创建vue项目的话 没有node_modules这个依赖包,没有的话安装一下依赖就好了命令是: cnpm install ),我不是第一次创建vue项目所以node_modules会有的, 安装完成后,要去看...

    先从node官网下载并安装node.js,安装node.js的作用就是利用npm资源管理器下载插件等…在这里插入图片描述

    ------把下载好的.exe文件双击安装,一直下一步就OK-------------

    1.安装node.js

    安装好的node试一下查看是不是安装成功,window键+r输入cmd进入系统管理器
    进入系统命令页面输入 node -v 检查是否安装成功
    在这里插入图片描述

    2.安装npm管理器

    npm包管理器,是集成在node中的,所以安装了node也就有了npm。有了npm就可以去下载资源库文件,可以通过命令进行下载了,先查看一下npm的版本号
    npm -v
    在这里插入图片描述

    3.安装淘宝镜像(cnpm)

    在系统管理台输入
    npm install -g cnpm --registry=https://registry.npm.taobao.org 耐心等待,没有报错就是成功的,因为我是安装过的,所以会提示这个信息,有可能网络的原因,下载会慢点 …,安装成功后就可以用cnpm 代替npm下载资源文件
    在这里插入图片描述

    4.安装vue脚手架构建工具

    在系统管理台输入
    npm install -g vue-cli然后耐心等待安装…
    如下图:
    在这里插入图片描述
    完成后,环境搭建和准备任务就差不多了,现在就可以用vue-cli来创建项目。可以在一个空白的文件下创建使用,这样显着不是太乱,不然等你的项目创建出来之后也不知道放哪里了。

    5.创建空文件夹放入vue项目

    输入 md vuedemo创建空文件,然后进入到vuedemo文件下
    cd vuedemo
    在这里插入图片描述

    6.开始创建Vue-click项目

    在命令行中运行命令 vue init webpack vueClickDemo,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中vueClickDemo是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。

    在这里插入图片描述

    稍等一波,项目会自动创建,

    在这里插入图片描述

    进入文件夹查看一下下载的东西

    在这里插入图片描述
    这个项目的目录和结果(如果是第一次创建vue项目的话 没有node_modules这个依赖包,没有的话安装一下依赖就好了命令是:cnpm install),我不是第一次创建vue项目所以node_modules会有的,

    在这里插入图片描述
    安装完成后,要去看一下文件是不是有,要确保资源文件一定要有

    7.运行项目

    在命令行输入cnpm install,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

    在这里插入图片描述

    在浏览器输入:http://localhost:8080/

    在这里插入图片描述
    大功告成!!!

    展开全文
  • vue.js安装步骤教程

    2020-07-11 17:38:59
    vue安装步骤教程地址:https://blog.csdn.net/weixin_43844158/article/details/89788002

    vue安装步骤教程地址: https://blog.csdn.net/weixin_43844158/article/details/89788002

    使用淘宝镜像cnpm安装Vue.js :https://www.cnblogs.com/happybread/p/8117442.html

    安装命令:

    1.在windows系统左下角搜索框输入cmd,打开命令提示符。

    2.输入命令vue -V查看系统当前安装的vue-cli版本。

    3.输入命令npm uninstall vue-cli -g卸载旧版本vue-cli。

    4.输入命令npm install -g @vue/cli安装最新vue-cli

    5.等待安装完成,输入命令vue -V查看vue版本,升级成功。

    前端运行命令:

    # 进入项目目录
    cd vue-test

    # 安装依赖
    npm install

    # 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
    npm install --registry=https://registry.npm.taobao.org

    # 本地开发 启动项目
    npm run dev

    Vue启动项目,找不到Cannot find module ‘node-sass’解决方法如下:

    问题点:
    刚开始启动项目 npm run serve 启动项目报错“Cannot find module ‘node-sass’“
    原来是网络的原因导致下载安装的no-model报的缺失,导致了项目的不完整,所以导致不能重启。
    解决办法:
    运行命令:cnpm install node-sass@latest  #即可解决网络差的同学可以选择重新下载no-modules#

    展开全文
  • vue.js安装步骤教程连接
  • 在文章详情页面Specificartical.vue(src/components)下执行getArticlesSpecific方法即可 {{specific.title}} {{specific.date}}/ {{specific.browse}}/ {{specific.content}} @ *{{index!=0?',':''}}{{tag}} import ...
  • Vue教程07(综合小案例)

    万次阅读 多人点赞 2019-07-12 07:36:46
      本文我们通过一个小案例来巩固下前面讲的...  页面布局我们通过bootstrap来快速实现,具体步骤如下 1.1 基础页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
  • 用webpack 安装vue教程

    2018-12-18 10:43:41
    Vue 安装步骤  首先要安装webPack,在上篇文章里面已经进行阐述,可以翻阅我之前的文章查看 然后初始化vue ,vue init webpack yourProjectName即可
  • 下面重点介绍一下vue的用法:vue起步:1、引包 2、启动new Vue({el:目的地,template:模板内容}) 其中options参数除了 el、template还有数据data在html中如何使用vue:按照上述步骤, 引包 new Vue对象 new Vue({el:...
  • Vue教程02

    2020-04-07 15:03:45
    跑马灯效果案例 本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果 1.分析 a....b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串...为了实现点击下按钮,自动截取的功能,需要把 2 步骤...
  • 安装步骤: 注意事项 ​ 为了避免出错cmd命令全部管理员运行!!!! 1、安装node:从官网下载并安装。 ​ 安装教程不多说了,百度一大堆,下面附上官网下载地址。 https://nodejs.org/en/ 2、安装npm:安装了...
  • Vue学习、从简单入门到深入 前言 用vue做了一些项目,但是感觉对vue理解还是比较浅,所以想根据尤大神的建议从头学一遍,已达到真正的掌握vue及其相关的前端工程化工具. 起步 扎实的 JavaScript / HTML / CSS 基本...
  • 今天给大家分享一个vuecli3.x + sass ...准备物料:脚手架:vuecli3.xnpm包:node-sass,sass-loader环境变量文件:.env.a, .env.b步骤:1、创建一个项目vue create skin_m2、安装npm包cnpm i node-sass -Scnpm i sa...
  • YDOOK: 谷歌浏览器 chrome 安装 Vue官方辅助调试工具 vue-devtools 详细安装教程步骤 1. 如果您的电脑可以连接网外,比如谷歌网址,可以直接在 chrome 的拓展程序部分 搜索添加 vue-devtools 插件: 2. 对于国内...
  • Vue入门教程

    2019-12-18 19:19:36
    2.具体步骤 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目 Vue2+VueR...
  • Vue教程(组件-父子组件传值) 父组件传值给子组件 现在我们想要将Vue实例中的 msg 的值传递给 子组件,实现步骤如下 1.父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的...
  • vue安装教程

    2019-07-09 17:13:39
    vue-cli安装步骤(附带cnpm安装不成功及vue不是内部命令) 2018年06月26日 00:25:53习惯是一种病阅读数 11885 1.依赖node所以先安装node,可从官网下载安装,安装一直下一步最后选安装目录 2.win+r输入cmd运行,...
  • vue框架搭建步骤

    2019-09-30 10:18:05
    npm安装教程 一、使用之前,我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。...
  • VUE配置教程

    2020-07-24 21:35:35
    VUE配置简单 一. 安装node.js 1. 下载安装包:下载地址:https://nodejs.org/en/download/;windows上选择.msi格式 2. 安装步骤:一直next 3. 验证安装:Win+R打开cmd窗口。输入node -v,显示版本号。 二. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 461
精华内容 184
关键字:

vue教程步骤

vue 订阅