vue的安装配置与项目创建
1,安装vue必须先安装node.js。 --------去官网安装node.js
因为npm依赖node.js环境,使用npm的时候需要安装node.js。安装node.js的时候npm会默认安装。【npm在国内使用比较慢,推荐使用淘宝开发的cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org】
在官网安装node.js,简易安装最新版本,版本必须>8.0;
2,安装vue.js-----npm install vue [【推荐vue官方文档】
3,安装cli----- npm install -g vue-cli
npm install -g @vue/cli 安装vue-cli3.0
npm install -g @vue/cli-init 拉取2.0旧版本 最后升级到3.0版本
cmd创建项目:
vue init webpack 项目名称---------- 创建vue项目 【 注意项目名称不能大写!!注意在后续创建组件的时候组件名称不能与标签名重复】
正确创建vue项目的顺序 ,回车,回车没回车没回车,不安装路由,不要代码检查,no,no,自己安装依赖。
创建好项目之后,将路径定位到项目文件夹根目录;
npm install; npm run dev/npm start运行项目;
http://localhost:8080/ 在浏览器打开
使用vscode创建vue项目:
vscode左下角打开终端;
定位到项目文件根目录;
vue create 项目名称;
选择预设----------手动选择
? Please pick a preset: (Use arrow keys) 请选择预设
> default (babel, eslint) 默认(javascript编译器,javascript代码检查工具)
Manually select features 手动选择
5.选择【Babel ,Router , CSS Pre--processors, Linter/Formatter 】
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 检查项目所需的功能:(空格选择,a全选,i反转) >(*) Babel javascript编译器,用来解析es6代码 【因为一些浏览器不能识别es6代码,babel工具可以将es6代码转译成浏览器能够识别的代码 ( ) TypeScript 类型脚本,是JavaScript的超集,支持所有JavaScript语法。用于:静态类型检查,智能提示函数名等,代码重构[重命名符号--可以对所有的引用都进行修改;自动更新引用路径;修改函数名等会校验提示。];可读性。 ( ) Progressive Web App (PWA) Support 渐进式网络应用程序。优点[可靠--当无网状态时,也可以立即加载出页面pwa;快速--网页加载速度很快;不用从应用商店下载,可以直接添加在用户的主屏幕上,提供类似于app的使用体验,意味着不用流量] (*) Router 路由管理器 用于实现页面交互[控制页面跳转],切换页面的时候不需要重新加载页面,单页面应用,不重新加载页面,不跳转到新页面,只是页面上的组件切换。还可以实现页面间传递参数 ( ) Vuex [构建大型应用的价值] 可以解决不同组件之间的数据共享和数据持久化的问题。 当多个组件依赖于同一状态,或者需要共享状态的时候,通过vuex可以方便组件之间的数据共享和通讯。 (*) CSS Pre-processors css预处理器 作用:[文件切分;模块化--方便代码分层,复用,依赖管理;选择符允许嵌套;变量--给属性值一个变量,方便风格统一,换肤等;运算--让值与值之间建立联系;函数;Mixin--类似于函数,用来产生一段css代码;工程化] (*) Linter / Formatter 代码规范标准 ( ) Unit Testing 单元测试 ( ) E2E Testing e2e测试
6.yes 【history模式:路由地址都是以"#"形式展示,但是有些时候,我们又希望路由地址中不出现"#",mode: 'history', // 去掉路由地址的#】
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
使用路由器的历史模式?(需要为生产中的索引回退设置正确的服务器,即需要服务器支持)
7.Less https://blog.csdn.net/qq_35430000/article/details/87097696 -----> Sass 、Scss、LESS 和 Stylus区别总结
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) 选择一个css预处理器(默认情况下支持postcss、autoprefixer和css模块)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
8.ESLint with error prevention only 【basic】;仅含防错功能 ESLint是JS代码检查工具
? Pick a linter / formatter config: (Use arrow keys) 选择一个配置
> ESLint with error prevention only eslint仅具有错误预防功能
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier eslint是代码规范和错误检查工具
9.Lint on save; 【这里不是太明白
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) 选择其他绒布功能
>(*) Lint on save
( ) Lint and fix on commit (requires Git)
10.In dedicated config files 保存在专用的文件; 【这里不是太明白
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) 希望在哪里放置babel,postcss,eslint等的配置
> In dedicated config files 在专用的配置文件中
In package.json
11.no;
? Save this as a preset for future projects? (y/N) 是否将此设置保存为将来项目的预设
等待创建完成;
- 查看npm版本 更新npm版本到最新版:npm install -g npm
启动项目:npm run serve
如果vue项目启动的时候报错:原因可能是在node_modules文件夹,先删除,然后再安装,再启动。
npm install rimraf -g 安装删除工具
rimraf node_modules 删除文件夹 npm install 重新安装文件夹 npm run build; npm run dev 补充:
安装axios: npm install --save axios;
安装swiper:cnpm install --save vue-awesome-swiper 组件运用
使用: import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
导出两个组件:components: {
swiper,
swiperSlide
}
vue的安装配置与项目创建的更多相关文章
- cocos2dx - 环境配置,项目创建
准备工具 cocos2dx当前最新版本:v3.9 官网下载地址: http://www.cocos.com/download/ python 2.7x最新版本:2.7.11 官 ...
- Ueditor .net版安装配置打开项目的源码傻瓜版教程 亲測~
环境要求: 没有 .NET Framework 4.0的要先安装 安装完 .NET Framework 4.0 后.还须要向 IIS 注冊应用程序池,注冊的方法是,使用管理员权限打开命令提示符(CMD ...
- Vue.js开发环境配置与项目创建
一.需要安装和配置 Node.js 与 npm 二.Vue.js的安装或cdn引用: ·cdn引用(不适合项目开发): <script src="https://cdn.jsdeliv ...
- mc01_IntelliJ IDEA安装与Java项目创建以及Tomcat配置
IntelliJ IDEA安装与激活 下载地址:http://www.jetbrains.com/idea/ 安装下一步下一步即可,关键是注册激活,该部分分两个步骤: 1. 配置windows hos ...
- Web框架之Django_01初识(三大主流web框架、Django安装、Django项目创建方式及其相关配置、Django基础三件套:HttpResponse、render、redirect)
摘要: Web框架概述 Django简介 Django项目创建 Django基础必备三件套(HttpResponse.render.redirect) 一.Web框架概述: Python三大主流Web ...
- vue的安装配置
1.访问vue的官网: https://cn.vuejs.org/v2/guide/installation.html安装配置 2.安装淘宝镜像项目搭建 .安装node 到官网下载安装. (中)h ...
- vue&uniapp环境搭建以及项目创建(webstorm)
以下是针对webstorm用户上手uniapp框架的学习 vue环境搭建以及配置(脚手架搭建) 首先要明确三样东西 npm:node.js的包管理器 webpack:主要用途是通过CommonJS 的 ...
- 【Vue】环境搭建、项目创建及运行
一.软件下载 1. 进入官网https://nodejs.org/en/下周node.js,傻瓜式安装步骤(一直下一步就好) 2. 进入官网http://www.dcloud.io/下载并安装编辑器H ...
- vue脚手架安装,新建项目,打包
1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了. 2.安装cnpm 淘宝镜像 npm install -g cnpm --registry=ht ...
随机推荐
- Visual Studio 2019 使用 Web Deploy 发布远程站点到IIS服务器
Visual Studio 2019 使用 Web Deploy 发布远程站点到IIS服务器的方式 在开发完项目之后,我们需要把开发的项目发布到指定的服务器上,有两种方式,如下 1.把项目发布成文件系 ...
- Linux命令:ipcs/ipcrm命令
ipcs/ipcrm命令 是linux/uinx上提供关于一些进程间通信方式的信息,包括共享内存,消息队列,信号 多进程间通信常用的技术手段包括共享内存.消息队列.信号量等等,Linux系统下自带的 ...
- phpexcel 导出xsl乱码
在header前面加上 ob_end_clean(); ob_end_clean();//清除缓冲区,避免乱码 header('Content-Type: application/vnd.ms-exc ...
- Java里如何将一个字符串重复n次
程序: import java.util.Collections; public class RepeatString { public static String getRepeatSpace(St ...
- ubuntu18源码包安装openresty
author: headsen chen date : 2019-07-30 15:42:24 #在ubuntu18.04 环境下,openresty的依赖库有:PCRE.OpenSSL.zlib, ...
- java 数据相除
编程的人都知道,java中的“/”.“%”运算,其中前者为取整,后者取余数.那么有没有快捷的运算方法取正常的运算结果呢? /** * TODO 除法运算,保留小数 * @author 袁忠明 * @d ...
- winform使用委托和事件在窗体之间传值
定义委托和事件,并且触发这个事件 //定义委托 public delegate void ShowOutStockDelegate(List<OutStockResultDto> outS ...
- pandas绘制矩阵散点图(scatter_matrix)的方法
以 sklearn的iris样本为数据集 import matplotlib.pyplot as plt from scipy import sparse import numpy as np imp ...
- 宣化上人:大佛顶首楞严经四种清净明诲浅释(10-11) -------------------------------------------------------------------------------- (转自学佛网:http://www.xuefo.net/nr/article23/230920.html)
大佛顶首楞严经四种清净明诲浅释(10) 唐天竺·沙门般剌密帝译 宣化上人主讲 一九八三年四月十七日晚讲于万佛圣城 是故阿难.若不断偷修禅定者.譬如有人.水灌漏卮.欲求其满.纵经尘劫.终无平复. 是故阿 ...
- ABAP DMEO 通过工单号读取内部对象号
*&---------------------------------------------------------------------* *& Report YDEMO_013 ...