vue安装搭建
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_global
及node_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安装搭建的更多相关文章
- vue安装及环境搭建
vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...
- Vue项目搭建完整剖析全过程
Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~! 项目技术栈:vue+webpack+bower+sass+axios ...
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- vue安装element-ui和px2rem的细节
1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里 ...
- Vue项目搭建与部署
Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
- 【MEVN架构】mongodb+ express + vue + nodejs 搭建后台
前端技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 服务端技术栈:nodejs + express + mongo ...
- 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& ...
随机推荐
- css.1
background-repeat背景平铺background-x水平平铺 background-y垂直平铺 background:url()no-repeat;不平铺 background-size ...
- C++内存管理-new,delete,new[],placement new的简单使用
技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 首先,我们先看一下C++应用程序,使用memory的途径如下图所示 C++应用程序中申请内存基于分配器的实现(std::allo ...
- C#获取文件类型
Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...
- Linux系统-tcpdump常用抓包命令
主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络数据 过滤端口: tcpdump -i e ...
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...
- C#读写三菱PLC和西门子PLC数据 使用TCP/IP 协议
本文将使用一个Github开源的组件库技术来读写三菱PLC和西门子plc数据,使用的是基于以太网的TCP/IP实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能 ...
- hibernate---级联保存、级联删除
直接上菜: dept.hbm.xml:关键点标蓝色这部分,inverse表示放弃维护外键关系,cascade就不用说了 <hibernate-mapping package="com. ...
- PythonStudy——Python 内存池机制 (Memory pool mechanism) Pymalloc
Python是如何进行内存管理-内存池机制 Pymalloc Python引用了一个内存池(memory pool)机制,即Pymalloc机制(malloc:n.分配内存),用于对小块内存的申请和释 ...
- Mathematics for Computer Science (Eric Lehman / F Thomson Leighton / Albert R Meyer 著)
I Proofs1 What is a Proof?2 The Well Ordering Principle3 Logical Formulas4 Mathematical Data Types5 ...
- Go之unsafe.Pointer && uintptr 类型
Go语言是个强类型语言.Go语言要求所有统一表达式的不同的类型之间必须做显示的类型转换.而作为Go语言鼻祖的C语言是可以直接做隐式的类型转换的. 也就是说Go对类型要求严格,不同类型不能进行赋值操作. ...