用Vue创建一个新的项目
- vue的安装
Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟。
Vue.js支持所有兼容ECMAScript5的浏览器。
在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢,可以考虑使用淘宝镜像的cnpm来代替npm。下文中仅使用npm来安装。
首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js。
如何查看node是否安装或者node版本呢?
进入cmd,输入命令 node -v,回车查看。node最好使用新一些的版本,否则后续安装会提示node版本过低。

如果是安装过node,则会显示node的版本,否则就会提示不是内部或外部命令,这时候需要自行去node官网下载
并安装(百度node安装)。
npm install vue
安装完毕后,可以检验版本。
vue -V

到此vue安装成功
- 创建一个vue项目
这里使用vue官网的命令行工具。Vue.js提供一个官方命令行工具,可以用于快速搭建大型单页应用。该工具提供的构建工具配置,可以直接使用,只需要一分钟即可以启动带热重载,保存时静态检查以及可用于生产环境的构建配置的项目。
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于webpack 模板的新项目
vue init webpack new-project
输入上面命令后,会询问几个选项,根据自己需要填写就可以了。
Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
Project description:项目描述,直接回车
Author :作者
vue build 构建方式(暂且这么解释)
两个选择(上下箭头选择,回车即为选定)
1.Runtime + Compiler:recommended for most users
(译:运行+编译:被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项,适合大多数用户的
install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
Use ESLint to lint your code?是否使用ESLint检测你的代码?
(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
Pick an ESLint preset:选择分支风格
选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安装单元测试(暂不详细介绍)
Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕,会提示接下来的命令行

# 安装依赖
cd new-project
npm install
#启动项目
npm run dev
这时候在浏览器中打开cmd上显示的地址就可以看到新建的页面。
http://localhost:8081
这时,可以到对应的文件夹下面看到文件的结构了。

但是这个只能在本地跑,要如何在我们自己的服务器上访问呢? 此时需要执行: ·
npm run build
会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。
用Vue创建一个新的项目的更多相关文章
- soapui中文操作手册(一)----创建一个新的项目
1) 创建一个新的项目 点击项目,选择新建项目SOAP.这将打开一个新的SOAP项目对话框. 注意:你也可以做CTRL + N(WIN)或CMD+ N(MAC)来创建一个新的SOAP项目. 在新的SO ...
- 使用Vue创建一个新项目
1.环境 保证已经安装好了node\npm\vue等工具,将路径设置为想要建立新项目的文件夹路径 2.关于npm与cnpm npm包管理器,是集成在node中的,node环境安装完成,npm包管理器也 ...
- 【微软混合现实】开始使用Unity-第一章:创建一个新的项目
使用Unity开发App,第一步需要创建一个项目.项目具有一系列组织好文件夹,其中最重要的是你的附件文件夹(Assets folder).在这个文件夹中,存储了从其他工具中创建的数字内容,比如Maya ...
- react:如何创建一个新项目
如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...
- Vue Create 创建一个新项目 命令行创建和视图创建
Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...
- 【Cocos2d-x for WP8 学习整理】(1)创建一个新项目
喜大普奔 10.1假期之前看到了一个很振奋的消息,就是随着Cocos2d-x 2.2的发布,WP8/WIN8有史以来第一次的合并到主版本了. 之前 V2 ...
- Eclipse中创建一个新的SpringBoot项目
在Eclipse中创建一个新的spring Boot项目: 1. 首先在Eclipse中安装STS插件:在Eclipse主窗口中点击 Help -> Eclipse Marketplace... ...
- Jersey 2.x 从Maven Archetype 创建一个新项目
创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...
- 使用source创建一个新项目(将本地项目文件和github远程库链接)
1. 本地创建项目文件夹 2. 将本地的项目添加到source中(我使用的source版本为2.4.7.0) 3. github创建远程库 4. 关联本地项目文件和github库 确定添加就可以了. ...
随机推荐
- Dapper学习总结
看了<Dapper从入门到精通>后的总结 (1)Dapper 是直接扩展 IDBConnection,而且是单独一个文件,可以直接嵌入到项目中使用. (2)通过手写sql语句,调用exec ...
- 基础的Mapgis三维二次开发-插件式
最近在做一个杭州石油的项目开发一个小系统. 1.命令必须是 ICommand 的派生类 using System; using System.Collections.Generic; using Sy ...
- poj3525 Most Distant Point from the Sea
题目描述: vjudge POJ 题解: 二分答案+半平面交. 半径范围在0到5000之间二分,每次取$mid$然后平移所有直线,判断半平面交面积是否为零. 我的eps值取的是$10^{-12}$,3 ...
- (70)zabbix telnet监控类型
概述 zabbix监控的方式很多,例如前面讲到的agent.snmp以及后续后续要讲到ssh和今天要讲到的telnet.流程很简单,创建item-->配置ip.用户.密码.端口.脚本->z ...
- Python爬虫系列-分析Ajax请求并抓取今日头条街拍图片
1.抓取索引页内容 利用requests请求目标站点,得到索引网页HTML代码,返回结果. 2.抓取详情页内容 解析返回结果,得到详情页的链接,并进一步抓取详情页的信息. 3.下载图片与保存数据库 将 ...
- 关于PHP连接池扩展php-cp遇到的那些坑
php-cp是国内大神写的php第三方扩展,具体就不用多说了,细读https://github.com/swoole/php-cp,下面来说说今天安装方法. 环境:CentOS7.2.1511 由于本 ...
- ccf 201712-4 行车路线(Python实现)
一.原题 问题描述 试题编号: 201712-4 试题名称: 行车路线 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将 ...
- COMP9021--6.13
1. break语句和continue语句都可以在循环中使用,且常与选择结构结合使用,以达到在特定条件满足时跳出循环的作用.break语句被执行,可以使整个循环提前结束.而continue语句的作用是 ...
- linux系统装载ELF过程
参考:程序员的自我修养 fork -->execve() //----kenerl space--------------- sys_execve() /*arch\i386\kernel\pr ...
- CentOS 7 安装 配置 Nginx + PHP
. CentOS 7 下配置 yum 安装 Nginx. 进入/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim ngi ...