精华内容
下载资源
问答
  • 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来...
  • 搭建vue开发环境

    2020-12-09 15:48:11
    搭建vue开发环境: 1、必须要安装nodejs 2、搭建vue开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli ( 此命令只需要执行一次 )   3、创建...
  • 从零搭建Vue开发环境

    2019-08-12 02:40:16
    从零搭建Vue开发环境:webpack4 vue-loader koa2 babel-loader v8 Babel v7 eslint git hooks editorconfig
  • 搭建vue开发环境.docx

    2021-08-18 10:13:53
    搭建vue开发环境.docx
  • vscode搭建vue开发环境(vue入门)

    千次阅读 2021-03-20 02:16:51
    参考文章: 1.vscode怎样搭建vue开发环境 https://www.php.cn/tool/vscode/440175.html 2.vue新建项目(一)vue-cli新建模板项目 https://blog.csdn.net/zhuming3834/article/details/72778147 3.使用vue create、vue...

    本文基于vue2.0版本,文末说明怎么升级为vue3.0版本

    一.安装VScode

    	从官网下载,安装就行。以下操作在win+r  -> cmd 命令行界面执行。
    	在vscode中就是在创建好的项目空白处右键open in Integrated Terminal(在内部终端中打开)执行npm install安装依赖,
    	npm run dev热部署等(第六步开始可以在命令行和vscode中都可以)。
    

    二.安装node.js

    	从nodejs官网下载。安装就行。
    	安装完成之后,可以在命令行中输入node -v ,如果出现相应的版本号,则说明安装成功。
    	npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。
    
    其中npm的安装目录在这里C:\Users\SJH\AppData\Roaming\npm

    三. 安装cnpm

        由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,
    所以还需要npm的国内镜像—cnpm。
        在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 。
    

    安装完成之后在C:\Users\SJH\AppData\Roaming\npm中会出现cnpm文件

    四.安装vue-cli脚手架构建工具

        在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
    

    通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

    五.用vue-cli构建项目

        在你的workspace中进入命令行。(不建议在桌面,建议在workspace中)
    在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目
        其中webpack是构建工具,也就是整个项目是基于webpack的。
        其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中,如下图:
    
    运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息
    列表如下
    (1)? Project name (VueTest002):项目名称name can no longer contain capital letters(不能大写)
    (2)? Project description (A Vue.js project) vue-cli新建项目(项目描述);
    (3)? Author (xhdx <zhuming3834@sina.com>) ;zhuming3834@sina.com(项目作者);
    (4)? Vue build
    ❯ Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY 
    allowed in .vue files - render functions are required elsewhere
    这里选择Runtime + Compiler: recommended for most users;
    (5)? Install vue-router? (Y/n) y 是否使用vue-router,这里根据需求选择;
    (6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint,这里根据需求选择;
    (7)? Pick an ESLint preset (Use arrow keys)
    ❯ Standard (https://github.com/feross/standard)
    Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 
    这里选择	Standard(https://github.com/feross/standard)
    (8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试,这里根据需求选择;
    (9)Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试,这里根据需求选择;
    (10) Should we run `npm install` for you after the project has been created? 
    (recommended) (Use arrow keys)
    创建项目后需要需要安装项目所需要的依赖,这里选择no,本步骤作为步骤6说明
    

    六.安装项目所需的依赖

        安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装
    	安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们
    项目需要的依赖包资源
    

    注:我在实际中其实是前面选择no不安装依赖,也是会有node_modules的,只是和yes安装的文件夹大小不一样

    七.运行项目

        安装完依赖包之后,就可以运行整个项目了。
        在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完
    代码后不用手动刷新浏览器就能实时看到修改后的效果。
        这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,
    也就是 node build/dev-server.js命令的一个快捷方式。
    

    项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

    八.集成element

    安装完nodejs的所有,能正常运行整个项目后,将element集成到项目中的步骤如下:

    1、在cmd命令行进入到项目根目录输入cnpm i element-ui -S
    2、安装完成之后,package.json文件会增加element-ui依赖
    

    在这里插入图片描述

    注:vue create、vue webpack init 创建vue项目产生的项目文件区别说明

    1.使用webpack init创建项目
    1.用法:vue init webpack app
    2.产生目录及说明
    build及config:webpack配置相关
    src:项目源码
    static:存放静态资源
    .babelrc:babel相关配置(因为我们的代码大多都是    ES6,而大多浏览器是不支持ES6的,所以我们需要babel帮我们转换成ES5语法)
    .editorconfig:编辑器的配置,可以在这里修改编码、缩进等
    .eslintignore:设置忽略语法检查的目录文件
    .eslintrc.js:eslint的配置文件
    .gitignore:git忽略里面设定的这些文件的提交
    index.html:入口html文件
    package.json:项目的配置文件,用于描述一个项目,包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
    package-lock.json:普通package.json文件“^2.0”这样写的,意味着版本可以大于等于2.0,如此就会出现各种错误。
    

    node_modules:通过npm install安装的依赖代码库

    使用vue create app
        1.使用vue create图形化界面创建
        2.产生目录及说明
    	node_modules:通过npm install安装的依赖代码库
    	public:部署到生产环境的目录
    	src:源码
    	.gitignore:git忽略里面设定的这些文件的提交
    	babel.config.js:babel转码配置
    	package.json:项目的配置文件,用于描述一个项目,包括我们init时的设置、开发环境、生成环境的
    	依赖插件及版本等。
    
    	总结vue create和vue init 的区别
        vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项度目,
    与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档网页。
        vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。
    	vue-cli2.x项目向专3.x迁移只需要把static目录复制到public目录下,
    老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行属配置)。
    

    以上介绍均是基于2.0的,在上述例子之后,执行 vue create xxx,会提示版本如下
    在这里插入图片描述
    把2.0没有@的vue-cli卸载了,装有@的@vue-cli3.0脚手架。
    顺着提示创建结束后执行npm run serve可以看见显示运行成功。
    在这里插入图片描述

    参考文章:

    1.vscode怎样搭建vue开发环境
    https://www.php.cn/tool/vscode/440175.html
    2.vue新建项目(一)vue-cli新建模板项目
    https://blog.csdn.net/zhuming3834/article/details/72778147
    3.使用vue create、vue webpack init 创建vue项目产生的项目文件区别说明
    https://blog.csdn.net/zyj123__/article/details/106361850
    
    展开全文
  • 如何搭建Vue开发环境的步骤

    千次阅读 2019-05-07 11:25:08
    相信很多人在刚开始学习Vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,要是隔断时间想要重新搭建第二次的时候,难免会有一些混乱,所以今天想整理出来;

      相信很多人在刚开始学习Vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,要是隔断时间想要重新搭建第二次的时候,难免会有一些混乱,所以今天想整理出来;

      :在搭建vue的开发环境之前,一定一定要先下载Node.js,Vue的运行是要依赖于Node的npm的管理工具来实现,Node可以在官网或者中文网里面下载,根据自己的电脑选择是32位还是64位 ,网址:http://nodejs.cn

    在这里插入图片描述
      二:下载好Node之后,打开docs管理工具,先看看Node安装成功了没有,输入node -v,回车,会输出Node的版本号,

    在这里插入图片描述

      这样就已经是安装成功了,由于在国内使用npm是非常慢的(npm install -g vue-cli),所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org

    在这里插入图片描述
      :淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入Vue,出来Vue的信息,说明安装成功;

    在这里插入图片描述
      :搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议尽量不要装在C盘,因为Vue下载下来的文件比较大,如果要改盘的话,直接输入G:回车就可以直接改盘;

    在这里插入图片描述
      然后我们开始创建新的项目输入命令:vue init webpack my-project 回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,这个我们在项目要用到,所以就输入y 回车;

    在这里插入图片描述
      下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的;

    在这里插入图片描述
      :文件夹已经下载好了,现在就可以进入文件夹,输入:cd my-project 回车,因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,输入命令:cnpm install

    在这里插入图片描述
      :需要安装 Vue 路由模块 vue-router 和网络请求模块 vue-resource的,输入:cnpm install vue-router vue-resource --save

    在这里插入图片描述

    下面我简单的说明下各个目录都是干嘛的:

    在这里插入图片描述
       :已经安装好之后,现在要来测试一下我们下载好的模板能不能正常的运行,在命令行输入: cnpm run dev 回车即可,

    在这里插入图片描述
      注意:8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080 就可以打开默认的模板了;

    在这里插入图片描述

    这样,我们的Vue基础项目已经安装并运行起来了,已经踏入了Vue的大门了,完结!

    ▼更多相关技术干货,请扫描关注公众号▼

    在这里插入图片描述

    展开全文
  • 主要介绍了使用vue-cli+webpack搭建vue开发环境的方法,需要的朋友可以参考下
  • linux 搭建vue开发环境

    2020-01-31 18:08:15
    文章目录一、linux 搭建vue开发环境1.1 下载安装node.js1.2 安装安装webpackage1.3 安装cnpm1.4 安装vue-cli1.5 使用vue-cli创建项目1.6 查看项目的运行效果 一、linux 搭建vue开发环境 1.1 下载安装node.js ...

    一、linux 搭建vue开发环境

    1.1 下载安装node.js

    • 下载
    wget https://nodejs.org/download/release/v6.12.3/node-v6.12.3-linux-x64.tar.gz
    
    • 解压
    tar -xzvf node-v6.12.3-linux-x64.tar.gz -C  /home/ybx/software/vue
    
    • 配置环境变量
    export NODEJS_HOME=/home/hadoop/app/node-v6.12.3-linux-x64
    export PATH=${PATH}:${NODEJS_HOME}/bin
    
    • 重启环境变量文件
    source /etc/profile
    

    1.2 安装安装webpackage

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

    webpack可以做到动态的把后端的代码变成浏览器能够读懂的代码。

    1.3 安装cnpm

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

    1.4 安装vue-cli

    cnpm install -g vue-cli
    

    1.5 使用vue-cli创建项目

    vue init webpack myVue
    

    在这里插入图片描述

    1.6 查看项目的运行效果

    cd myVue
    cnpm install
    cnpm run dev
    

    1.7 参考

    Linux下Vue开发环境搭建一篇全搞定

    展开全文
  • VSCode搭建VUE 开发环境

    万次阅读 2020-03-26 17:07:19
    五、安装vue-cli脚手架 npm install -g @vue-cli cnpm install -g @vue/cli 接下来就可以使用vue-cli来构建项目 六、安装webpack cnpm install -g webpack 七、用vue-cli构建项目 方式一:命令行创建 首先选定目录,...

    一,下载Node.js,去官网https://nodejs.org/en/download/下载

    选择Windows Installer (.msi)64位版本

     

    二、安装Node.js

    双击下载文件,选择安装路径,安装。

    安装完后在cmd中执行 node -v 查看版本

    安装完后在cmd中执行 npm -v

    显示如下即表示Node.js安装成功。

     

    三、配置npm的全局模块的存放路径以及缓存的路径
    默认会将模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。所以可以修改路径
    在node.js的安装目录下新建两个文件夹node-cache和node_global


    然后在cmd中分别执行
    npm config set prefix "C:\software\Nodejs\node_global"
    npm config set cache "C:\software\Nodejs\node_cache"


    之后用npm install XXX -g安装以后模块就在这两个文件夹里。

     

    四、安装cnpm

          有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以还需要npm的国内镜像—cnpm

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

    之后可以用cnpm代替npm来安装依赖包

    五、安装vue-cli脚手架

    npm install -g @vue-cli

    cnpm install -g @vue/cli

    接下来就可以使用vue-cli来构建项目

    六、安装webpack

    cnpm install -g webpack

    七、用vue-cli构建项目

    方式一:命令行创建

    首先选定目录,并切换到选定目录

    vue init webpack vue001

    nit:初始化

    webpack:构建工具,即整个项目基于webpack构建

    MyVue:整个项目文件夹的名称

     

    方式二:Vue项目管理器图形化界面创建

    首先选定目录,并切换到选定目录,执行 vue ui  ,打开Vue项目管理器图形化界面

     

    新建项目,选择npm包管理器

     

     

     

     

    项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装

    八、安装项目依赖资源

    切换到项目文件夹下,执行 cnpm install (前面已经用cnpm代替npm)

    现在可以运行项目了

    九、运行项目

    在项目目录下,执行 npm run dev ,项目会以热加载的方式运行。

     

     

     

     

     

     

    展开全文
  • 内网状态下搭建VUE开发环境

    千次阅读 2021-01-19 15:18:53
    内网环境下搭建vue开发环境 步骤一: 首先,准备两台电脑,一台可以连接外网,在外网环境下完成环境搭建,在官网下载node;另外下载一个编辑器,我自己习惯用VScode; 步骤二: 将安装包用U盘(或者直接读取本地磁盘...
  • Python3开开发发环环境境搭搭建建详详细细教教程程 这篇文章主要介绍了Python3开发环境搭建详细教程本文通过图文并茂的形式给大家介绍的非常详细对大家的 学习或工作具有 定的参考借鉴价值,需要的朋友可以参考下 ...
  • windows 环境下搭建 Vue 开发环境
  • 从零开始搭建Vue开发环境(windows)

    千次阅读 2020-09-20 22:12:57
    一、 介绍 Node.js 是一个基于 Chrome V8 引擎的 ...node下载地址:http://npm.taobao.org/mirrors/node,进入node下载的淘宝镜像地址,选择最新的安装包(也可选择稳定的安装包).msi文件,对应自己开发环境,如图。
  • windows下搭建vue开发环境

    千次阅读 2020-02-28 12:34:25
    一、在搭建vue开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的包管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64,然后傻瓜式安装即可。 网址:...
  • 相信很多人在刚开始学习vue这个框架的时候,最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前学习angular的时候搭建过一次,过了一个月后再搭建第二次的时候,竟然有...一:在搭建vue开发环境之前,一...
  • https://www.jianshu.com/p/b001ea69b7f5
  • Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...如果要使用当然是环境要安装啦,提供安装手册
  • Windows下下PHP开开发发环环境境搭搭建建教教程程(Apache+PHP+MySQL) 这篇文章主要为大家详细介绍了Windows下PHP开发环境搭建教程 Apache+PHP+MySQL具有一定的实用性和 参考价值感兴趣的 伙伴们可以参考一下 由于换...
  • mac版搭建vue开发环境

    千次阅读 2019-01-11 15:59:04
    记一次macbook搭建vue开发环境 步骤:(五步走) Homebrew (mac系统下的包管理器) node.js (javascript运行环境-runtime) npm (nodejs下的管理器) webpack (构建工具) vue-cli (用于生成模板的vue工程...
  • windows下搭建vue开发环境最新

    千次阅读 2018-03-10 10:59:46
    Vue.js是一套构建用户界面的 “渐进式框架...2016年,Vue同Angular、React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue环境搭建。一、node.js安装Vue项目通常通过webpack工具来构建,而w...
  • 1.1 Python基础教程 weixistyle 1 开发环境搭建 2016 - 2018 魏曦课堂 保留所有权利 All Rights Reserved. 1.1 关于本课程 魏曦课堂官 站上提供了清视频件演示源码讲义等资料的 获取式 联络式 QQ 167347309 微信 ...
  • 从零开始搭建vue开发环境

    万次阅读 多人点赞 2017-11-14 15:46:13
    =-= 刚刚打算开始整SpringBoot框架,结果领导突然说前端人手不够,让我学学vue,然后去写前端页面,而且这个优先级高,没辙,开搞呗  原先以为vue和以前用的什么easyUi,echarts差不多,直接引入个js就可以使用,...
  • 因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue开发环境,运行GitHub上的开源项目。...
  • Idea搭建Vue开发环境:第一个Vue程序

    万次阅读 多人点赞 2018-08-17 17:31:54
    #### Idea新建Vue步骤 #####1.需要安装好nodejs和npm,然后输入下面的cmd命令查看是否安装好 node -v npm -v #####2.在Idea中新建Project,选择static web项目,项目名称:HelloVue 2.0 如果是在maven工程下新建vue...
  • 目前前端三大框架(vue、react、angular)中vue是前端工程师经常使用的,在使用之前需要搭建vue开发环境,闲话少说,接下来咱们一起操作起来吧 环境 系统:Windows 运行时:node.js 搭建步骤 一、安装nodejs ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,198
精华内容 10,879
关键字:

搭建vue开发环境

vue 订阅