title: vue安装搭建

date: 2018-04-21 14:00:03

tags: [vue]

安装

首先安装nodejs

直接官网下载最新版本http://nodejs.cn/download/,安装对应版本即可。

这里下64位window.msi版本。

安装修改安装路径后其他默认即可。我放D盘

环境配置

安装后需要修改npm的环境配置,无所谓的也可以不改。

不改的话npm install 会默认安装到C:\Users\Administrator\AppData\Roaming\npm

在我的安装路径下D:\nodejs里面新增两个文件夹node_globalnode_cache

在命令行中:

	npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

在环境变量中的系统变量新建NODE_PATH,输入D:\nodejs\node_global\node_modules,

在环境变量中的用户变量编辑path,把安装nodejs自动设置的C:\Users\Administrator\AppData\Roaming\npm这个

修改为D:\nodejs\node_global

安装yarn

	npm install -g yarn  #安装国内镜像,速度会快多
yarn --version #有时候需要重启cmd

安装淘宝镜像

由于许多npm包都是在国外,安装起来特别慢,所以我们这里利用淘宝的镜像服务器,来对我们依赖的module进行安装。

	npm install -g cnpm --registry=https://registry.npm.taobao.org  #安装国内镜像,速度会快多
cnpm -v

安装vue

	npm install vue   #安装vue,有警告没影响
npm install -g vue-cli #安装脚手架, -g就是全局安装,不加就会在当前路径新建一个
#node_modules文件夹,并安装在里面
vue --version #成功的话就看到版本了

安装webpack

	cnpm install webpack -g

创建项目

新建一个项目文件夹,我是在D盘新建一个vue-test,进入文件夹后,右键进入命令行或者git bash here,

输入

    $ vue init webpack vue-test #项目名称,然后一路回车(vue2版本)
$ vue create vue-test #项目名称,然后一路回车(vue3版本)
#Project name (vue-test) 项目名称,回车默认
#Project description (A Vue.js project) 项目描述,回车默认
#Author 写你自己的名字 #这里会新增加一个vue-test的项目文件夹

安装项目依赖

进入项目文件夹里面,我的是D:\vue-test\vue-test

在该文件下输入命令: npm install (这里就不要用国内镜像cnpm安装,以防后面会缺依赖库)

  $ npm install #这里就不要用国内镜像cnpm安装,以防后面会缺依赖库
$ cnpm install vue-router vue-resource --save #安装 vue 路由模块vue-router和网络请求模块vue-resource
$ npm run dev #启动项目,默认是8080端口,config->index.js->dev:port可以修改
#另外将config->index.js->build:assetsPublicPath,打包后的文件路径修改为'./',原为'/' $ yarn add axios #安装插件

打包上线

因为是单页面,打包后就可以用了

	$ npm run build #打包完成后,会生成 dist 文件夹,可以直接打开本地文件查看
#项目上线时,只需要将 dist 文件夹放到服务器就行了。

vue安装搭建的更多相关文章

  1. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

  2. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  3. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  4. vue安装element-ui和px2rem的细节

    1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里 ...

  5. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  6. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  7. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  8. 【MEVN架构】mongodb+ express + vue + nodejs 搭建后台

    前端技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 服务端技术栈:nodejs + express + mongo ...

  9. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

随机推荐

  1. Alpha冲刺6

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10004107.html 作业博客:https://edu.cnblogs.com/campus ...

  2. 第一章:深入web请求过程

    初学者,总结一下读书笔记,望海涵. 1.1 B/S网络架构概述 相比于C/S架构,B/S网络架构(Browser/Server)从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,采用 ...

  3. 外网如何访问web项目holer实现篇

    外网访问WEB 内网主机上安装了WEB服务器,只能在局域网内访问,怎样从公网也能访问本地WEB应用? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7及以上版本 ...

  4. IDEA控制台乱码解决

    打开Intellij的安装的bin目录(D:\Program Files\JetBrains\IntelliJ IDEA 14.0\bin ),找到上图的两个文件(根据你的系统是32位或64位选择其中 ...

  5. InstallShield-常用prq文件的下载地址

    VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...

  6. ArcMap 图层无法编辑

    原因一.图层被其他程序占用 解决方法:关闭与之相关的程序与服务 原因二.没有开启编辑 解决方法:打开编辑器工具>>选项>>版本管理>>勾选或取消勾选编辑数据库版本并 ...

  7. Nginx安装详细指南

    nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境.  gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...

  8. "Error: [$compile:multidir] Multiple directives

    angularjs 中控制台报"Error: [$compile:multidir] Multiple directives错误 可以在当前html元素之上增加父元素,在父元素中加入第二个指 ...

  9. Firebird 烂笔头(一)

    下载非安装版,将文件解压缩到D:\FireBird2.5下面.然后里面有.bat文件,选择自己适合的类型安装后,在服务里面会有一个firebirdserver开头的服务,右键启动. win+R,在命令 ...

  10. python 基本语句

    python 基本语句 在使用python的变量前必须给它赋值,因为python变量没有默认值. 获取用户输入值 此时需要注意:input函数的返回值为文本或字符串. 一些简单的函数 乘方 绝对值 将 ...