一 node安装

1 如果不确定自己是否安装了node,可以在命令行工具内执行:node -v;

2如果执行结果显示:xx不是内部命令,说明你还没有安装node,node按爪给你地址 : http://nodejs.cn/download/

注意:安装node-cli脚手架目前需要node版本 v4.0以上

二  vue-cli 全局安装

命令行执行: npm install -g vue-cli    //加-g全局安装  不能使用Vue create 命令 需要创建项目然后再对项目进行初始化

   或者: npm install -g @vue/cli   //可以使用vue create 命令  需要node版本>=8

注意:1 查看node版本。如果版本低升级node版本,最快的办法卸载重新安装

   2  如果npm在国内的网络环境下可能会比较慢,解决方案:

使用淘宝镜像:

1>.官方网址:http://npm.taobao.org

2>.安装:npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

3>.注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

4> 如何更新npm的方法:  可以使用npm update -g 来更新版本

三 创建项目

1 如果执行npm install -g vue-cli

执行命令: vue init webpack demo(你新建的项目名称/文件名称)

执行之后将会 自动初始化一个文件夹 :demo

手动打开demo文件夹 可以看到 已经初始化好了 一个基本的项目:

2 如果执行 npm install -g @vue/cli 命令

执行 vue 查看vue命令

执行vue create [filename]创建项目

四 启动项目

如上图所示,执行初始化项目以后,下面会有对应的命令:

继续执行: cd demo (这是进入到demo文件夹的命令)

然后执行 安装 :npm install

注: npm install 执行可以进行vue已经vue的插件安装,在第三步的时候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;

安装完成之后再执行命令: npm run dev /yarn serve

整个项目就已经启动了:

注意:如果打开浏览器以后,没有启动成功,检查一下是不是端口号被占用了,次接口可以在config/index.js下进行修改,建议修改成不常用的一个端口。

五、项目文件配置介绍

build 和 config  是关于webpack的配置,里面包括一些server,和端口;

node_modules: 安装依赖代码库;

src :  存放源码;

static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。

.babelrc:把es6文件编译成es5

.babelrc文件

{
"presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件
"plugins": ["transform-runtime"],//把es6的方法做转换
"comments": false //false表示转换后代码不生成注释
}

.editorconfig:编辑器的配置

.editorconfig

charset = utf-8  //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2 //缩进大小是2格
end_of_line = lf //换行符的风格
insert_final_newline = true //当你创建一个文件,会自动在文件末尾插入新行
trim_trailing_whitespace = true //自动移除行尾多余空格

.eslintignore 忽略语法检查的目录文件

就是忽略对build/*.js和 config/*.js

package.json :

{
"name": "demo",
"version": "1.0.0",
"description": "demoApp",
"author": "",
"private": true,
"scripts": { /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": { /*项目的依赖*/
"vue": "^2.2.2",
"vue-router": "^2.2.0"
},
"devDependencies": { //编译需要的依赖
.......................
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

vue手脚架安装和项目创建的更多相关文章

  1. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

  2. Scrapy库安装和项目创建

    Scrapy是一个流行的网络爬虫框架,从现在起将陆续记录Python3.6下Scrapy整个学习过程,方便后续补充和学习.本文主要介绍scrapy安装.项目创建和测试基本命令操作 scrapy库安装 ...

  3. VUE 安装及项目创建

    Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...

  4. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

  5. 测试开发之Django——No2.Django的安装以及项目创建

    开发平台:Mac Python版本:3.7 Django版本:2.0.5 一.Django的安装 1.pip安装 输入命令pip install Django==2.0.5 说明:不指定版本,则安装的 ...

  6. django系列2--下载安装、项目创建、配置、启动

    Django下载与安装 一.使用pip: 1.下载: django的官网下载页:https://www.djangoproject.com/download/ 1.使用pip安装, 在cmd命令行中输 ...

  7. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  8. 4. gitlab 安装、项目创建

    官网: https://about.gitlab.com/ https://docs.gitlab.com/omnibus/maintenance/README.html#get-service-st ...

  9. Windows下Django的安装与项目创建

    1.Django的安装命令:pip install django 2.如果要指定安装版本可用:pip install django==1.10.3 3.查看指定的安装库:pip show django ...

随机推荐

  1. U-Mail邮件营销可视化编辑设计邮件模板so easy

    相信每位看过军事演习的朋友都知道,现代战争越来越就像一场沙盘演练,真正做到了“运筹帷幄之中决战千里之外”,后方坐镇指挥战斗的能够将前线战场变得透明,这就叫“可视化战争”,做到了<孙子兵法> ...

  2. D3——Axes

    使用d3.svg.axis() 创建一个 axis function: var xAxis = d3.svg.axis(); an axis function is called, it doesn’ ...

  3. jq实现鼠标经过出现上拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. JS实现键盘监听(包括组合键)

    依然使用案例驱动~案例是学习的最好实践!   <html>   <head>   <meta http-equiv="Content-Type" co ...

  5. iOS js 使用与JSContext

    JSContext:js执行环境,包含了js执行时所需要的所有函数和对象: js执行时,会在执行环境搜索需要的函数然后执行,或者保存传入的变量或函数: JSContext *jsContext = [ ...

  6. cocos2d-x3.0 后配置信息重置

    原文地址:http://blog.csdn.net/qqmcy/article/details/37722689 近期遇到这种一个问题,cocos设置setup.py中ndk.sdk.ant时设置的路 ...

  7. chrome下载离线安装包的方法

    https://www.google.com/chrome/browser/desktop/index.html?system=true&standalone=1,一般默认下载稳定版,如果需要 ...

  8. 【PHP】mysql_insert_id() 函数

    mysql_insert_id() 函数返回上一步 INSERT 操作产生的 ID. 如果上一查询没有产生 AUTO_INCREMENT 的 ID,则 mysql_insert_id() 返回 0. ...

  9. Kali-linux控制Meterpreter

    Meterpreter是Metasploit框架中的一个杀手锏,通常作为利用漏洞后的攻击载荷所使用,攻击载荷在触发漏洞后能够返回给用户一个控制通道.当使用Armitage.MSFCLI或MSFCONS ...

  10. Kubernetes 学习2 k8s基础概念

    一.架构描述 1.基本架构 2.pod ,有两类 a.自主式pod 自我管理的,创建之后,任然是需要提交给API Server,API Server接受之后然后由调度器调度到指定的 node节点,由n ...