vue手脚架安装和项目创建
一 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手脚架安装和项目创建的更多相关文章
- angular入门一之环境安装及项目创建
angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...
- Scrapy库安装和项目创建
Scrapy是一个流行的网络爬虫框架,从现在起将陆续记录Python3.6下Scrapy整个学习过程,方便后续补充和学习.本文主要介绍scrapy安装.项目创建和测试基本命令操作 scrapy库安装 ...
- VUE 安装及项目创建
Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...
- Vue环境搭建和项目创建
目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...
- 测试开发之Django——No2.Django的安装以及项目创建
开发平台:Mac Python版本:3.7 Django版本:2.0.5 一.Django的安装 1.pip安装 输入命令pip install Django==2.0.5 说明:不指定版本,则安装的 ...
- django系列2--下载安装、项目创建、配置、启动
Django下载与安装 一.使用pip: 1.下载: django的官网下载页:https://www.djangoproject.com/download/ 1.使用pip安装, 在cmd命令行中输 ...
- vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)
vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...
- 4. gitlab 安装、项目创建
官网: https://about.gitlab.com/ https://docs.gitlab.com/omnibus/maintenance/README.html#get-service-st ...
- Windows下Django的安装与项目创建
1.Django的安装命令:pip install django 2.如果要指定安装版本可用:pip install django==1.10.3 3.查看指定的安装库:pip show django ...
随机推荐
- U-Mail邮件营销可视化编辑设计邮件模板so easy
相信每位看过军事演习的朋友都知道,现代战争越来越就像一场沙盘演练,真正做到了“运筹帷幄之中决战千里之外”,后方坐镇指挥战斗的能够将前线战场变得透明,这就叫“可视化战争”,做到了<孙子兵法> ...
- D3——Axes
使用d3.svg.axis() 创建一个 axis function: var xAxis = d3.svg.axis(); an axis function is called, it doesn’ ...
- jq实现鼠标经过出现上拉菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS实现键盘监听(包括组合键)
依然使用案例驱动~案例是学习的最好实践! <html> <head> <meta http-equiv="Content-Type" co ...
- iOS js 使用与JSContext
JSContext:js执行环境,包含了js执行时所需要的所有函数和对象: js执行时,会在执行环境搜索需要的函数然后执行,或者保存传入的变量或函数: JSContext *jsContext = [ ...
- cocos2d-x3.0 后配置信息重置
原文地址:http://blog.csdn.net/qqmcy/article/details/37722689 近期遇到这种一个问题,cocos设置setup.py中ndk.sdk.ant时设置的路 ...
- chrome下载离线安装包的方法
https://www.google.com/chrome/browser/desktop/index.html?system=true&standalone=1,一般默认下载稳定版,如果需要 ...
- 【PHP】mysql_insert_id() 函数
mysql_insert_id() 函数返回上一步 INSERT 操作产生的 ID. 如果上一查询没有产生 AUTO_INCREMENT 的 ID,则 mysql_insert_id() 返回 0. ...
- Kali-linux控制Meterpreter
Meterpreter是Metasploit框架中的一个杀手锏,通常作为利用漏洞后的攻击载荷所使用,攻击载荷在触发漏洞后能够返回给用户一个控制通道.当使用Armitage.MSFCLI或MSFCONS ...
- Kubernetes 学习2 k8s基础概念
一.架构描述 1.基本架构 2.pod ,有两类 a.自主式pod 自我管理的,创建之后,任然是需要提交给API Server,API Server接受之后然后由调度器调度到指定的 node节点,由n ...