vue开发框架搭建(详细版)

环境搭建

1、安装node.js:

可以从官网下载各种系统下的安装包,地址:http://nodejs.cn/download/

1)如果你是window系统,那简单了,直接下载.msi安装文件安装即可愉快的使用

2)如果你是linux系统,那安装方式就很多了,具体可以参考:

https://nodejs.org/en/download/package-manager/

查看是否安装成功:

$node -v 

2、安装npm

目前nodejs版本已经集成安装npm的包管理工具,所以无需额外再安装,查看安装是否成功:

$npm -v                          

注意:国内网络情况,直接npm安装包一般会慢的让你抓狂,这时候,你要么FQ,要么通过国内npm源进行安装,如:淘宝https://npm.taobao.org

方便起见,可安装他们定制的cnpm命令行工具来代替npm(如果你目前环境连taobao域名都访问不上,那你可以使用后面提供的其他国内源进行指定安装npm包即可),后面包的安装都基于cnpm命令进行安装

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

同时推荐使用yarn管理工具

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题,即:

  • 安装的时候无法保证速度/一致性
  • 安全问题,因为 npm 安装时允许运行代码

我们可以用npm 下载yarn

npm install -g yarn

获取框架

基础的工具及需求环境已经讲完,现在开始获取vue脚手架,通过安装npm模块vue-cli,就可以进入神奇的vue+webpack构建世界了:

1、安装vue-cli命令行包模块

$ cnpm install -g vue-cli;

2、获取vue+webpack基础框架

$vue init webpack <my-project-name> 

获取框架时,会出现一些选项选择,直接回车选择默认值;

以上完成基础框架的获取,但只是一个框架,就像一个人的骨架,现在我们还需要给这个骨架添加丰富多彩的内容。

框架结构如下:

3、进入你刚创建的框架目录,安装需要的包及所有依赖关系:

$cd myvue

$cnpm install

静静的等待下载项目所需的依赖包

完成npm模块包的下载,在文件package.json你可以查看你都下了哪些模块以及他们各自的版本号信息

注意:安装模块包过程如果出现报错,最好删掉整个模块目录node_modules/,重新安装一遍,因为很多依赖如果没有顺利安装ok,容易出现莫名其妙的问题。

4、验证是否成功搭建框架:

启动vue

$npm run dev

看到下面美丽的页面,那么恭喜你,顺利开启了vuejs的世界

时间: 2024-11-12 13:44:30

vue开发框架搭建(详细版)的相关文章

利用apache+svn+jenkins+maven 实现java环境的自动化构建和部署(一)(网内首发超详细版)

目录结构如下: 目录 1说明及环境介绍3 1.1说明3 1.2环境准备及格式约定4 2 Linux下apache搭建svn服务器4 2.1 apache安装部署4 2.2 svn安装部署5 2.3整合svn和apache6 2.4 ssl方式部署apache7 2.4.1安装apache7 2.4.2安装svn7 2.4.2 部署认证8 3 Linux下svn独立服务器方式部署9 3.1安装SVN9 3.2 配置环境10 3.3 权限配置样例11 3.4 启动SVN服务器12 3.5 访问方式1

Spring4.X + spring MVC + Mybatis3 零配置应用开发框架搭建详解(1) - 基本介绍

Spring4.X + spring MVC + Mybatis3 零配置应用开发框架搭建详解(1) - 基本介绍 spring集成 mybatis Spring4.x零配置框架搭建 两年前一直在做后台的纯Java开发,很少涉及web开发这块,最近换了个纯的互联网公司,需要做Web后台管理系统,之前都是用xml配置的项目,接触了公司Spring4.x的零配置项目,觉得非常有感觉,不仅仅配置简单,而且条理清晰,所以,这里把学习的内容记录下来,一来加深对这块技术的印象,另外准备做个简单的教程,如果给

vue项目搭建 (一)

vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以帮我指证,必定虚心接受 技术栈: vue2+vue-router+vuex+axios+webpack+es6/7 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── apsi | | ├── api

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev

IntelliJ IDEA 12 创建Web项目 教程 超详细版

原文:IntelliJ IDEA 12 创建Web项目 教程 超详细版 IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走在路上 ... 首先要说一点,在IntelliJ IDEA里面“new Project” 就相当于我们eclipse的“workspace”,而“new Module”才是创建一个工程. 这个和Eclipse有很大的区别 1.官

Onvif备忘录(1)----简介及开发框架搭建

1:Onvif简介 安防产品的通用标准目前有两大主流阵营:Onvif以及Psia,从目前厂家的支持数量以及市场占有量来说,Onvif已经牢牢占据了领先地位,且在网络视频监控领域,优势地位更明显.下面摘录百科的描述来给Onvif做下简单介绍: 2008年5月,由安讯士联合博世及索尼三方宣布将携手共同成立一个国际开放型网络视频产品标准网络接口开发论坛,取名为ONVIF(Open Network Video Interface Forum,开放型网络视频接口论坛),并以公开.开放的原则共同制定开放性行

IntelliJ IDEA 12 创建Web项目 教程 超详细版(转)

IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走在路上 ... 首先要说一点,在IntelliJ IDEA里面“new Project” 就相当于我们eclipse的“workspace”,而“new Module”才是创建一个工程. 这个和Eclipse有很大的区别 1.官网下载下来的默认不是黑色的主题 这里需要修改一下 工具栏上的扳手图标 或

C++:C++11新特性超详细版(1)

前言: 虽然目前没有编译器能够完全实现C++11,但这并不意味着我们不需要了解,学习它.深入学习C++11,你会发现这根本就是一门新的语言,它解决了c++98中许多遗留下来的问题.早晚会有一天,C++11便会普及大部分编译器.因此,提早做些准备也是应该的. 在此我想做一个关于C++11的专题,将C++11的新特性进行一一讲解,以通俗易懂的语言及例子帮助读者入门C++11.本文便是C++11新特性超详细版系列文章的第一篇, 即C++:[C++11]新特性超详细版(1). 不过我要强调的是,这些文章

利用apache+svn+jenkins+maven 实现java环境的自动化构建和部署(四)(网内首发超详细版)

6安装maven 下载地址:http://maven.apache.org/download.cgi 解压安装 unzip –o apache-maven-3.2.1-bin.zip mv apache-maven-3.2.1 maven 配置环境变量 MAVEN_HOME=/usr/local/maven export PATH=$MAVEN_HOME/bin:$PATH 7 java环境自动构建部署 7.1 新建job 输入名称如下图 输入SVN服务器地址 注意:上面已经认证过了,因此没有报