前端(二十三)—— Vue环境搭建
一.Vue环境搭建
1.安装node
- 去官网下载node安装包
- 傻瓜式安装
- 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs)
- 可以通过node提供的npm包管理器安装vue脚手架
- 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)
2.安装全局vue脚手架
- 起管理员终端(mac: sudo)
cnpm install -g @vue/cli
- 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装
3.创建项目
- 采用可视化方式创建(vue ui)
- 命令行
1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue creat 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Router, Vuex
6.采用Router的history...
7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目
4.启动项目
1.进入项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)
5.项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
6.项目开发
- vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
- main.js
// 不用修改
// 采用之前的语法创建根实例
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
- *.vue
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default {
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
前端(二十三)—— Vue环境搭建的更多相关文章
- Vue项目二、vue环境搭建以及Vue-cli使用及详解
一.Vue多页面应用的环境搭建 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <scrip ...
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- Vue环境搭建、创建与启动、案例
vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...
- Redash 二开 - 后端环境搭建
Redash 二开 - 后端环境搭建 一.操作系统选择 官方文档有一句话:Windows users: while it should be possible to run Redash on a W ...
- 总结Selenium自动化测试方法(二)测试环境搭建
(接上期内容) 二.测试环境搭建 1.安装python 现在python3.0比python2.0多了一些改进的功能(详见http://zhidao.baidu.com/link?url=3sT1g7 ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- C# NX二次开发环境搭建
在网上看到一篇C#二次开发环境搭建的文章:NX二次开发-使用NXOPEN C#手工搭建开发环境配置 ,写得非常好.我按照文章操作,过程中遇到几个问题,把问题分享给大家,希望对各位有帮助. 注意三点: ...
- 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
背景介绍和环境搭建 背景 crudapi增删改查接口系统的后台Java API服务已经全部可用,需要一套后台管理UI,主要用户为开发人员或者对计算机有一定了解的工作人员,通过UI配置元数据和处理业务数 ...
随机推荐
- .net Core 在 CentOS7下,报The type initializer for 'Gdip' threw an exception.异常
.net Core允许在 Centos7 上,使用 System.Draw.Common类库时,报以下错误: "Class":"System.TypeInitializa ...
- Rust <5>:测试
测试运行顺序:单元测试(同处于源文件中,以 #[cfg(tests)] 标记 mod,以 #[test] 标记 function).集成测试(位于项目根路径下的 tests 目录下,不需要 #[cfg ...
- python学习笔记:python简介和入门
编程语言各有千秋.C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语言. Python就为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数 ...
- vue-cli3.0打包完自动压缩zip
打包是我们常见的操作 一般打包完还需要压缩丢到服务器解压 首先 我们需要一个 filemanager-webpack-plugin npm i filemanager-webpack-plugin - ...
- NMS python实现
import numpy as np ''' 目标检测中常用到NMS,在faster R-CNN中,每一个bounding box都有一个打分,NMS实现逻辑是: 1,按打分最高到最低将BBox排序 ...
- python之正则表达式【re】
在处理字符串时,经常会有查找符合某些规则的字符串的需求.正则表达式就是用于藐视这些规则的工具.换句话说,正则表达式是记录文本规则的代码. 1.行定位符. 行定位符就是用来表示字符串的边界,“^”表示开 ...
- 转 loadrunner11 录制 chrome 浏览器
chrome不设置代理的原始状态 图1 [LoadRunner]解决LR11无法录制Chrome浏览器脚本问题 LoadRunner录制脚本时,遇到高版本的IE.FireFox,或者Chrome浏 ...
- nmon 定时任务 监控资源
nmon命令: # ./nmon –f -s 30 –c 100 说明:-f 以文件的形式输出,默认输出是机器名+日期.nmon的格式,也可以用-F指定输出的文件名,例如: # ./nmon_x8 ...
- 【题解】An Easy Problem
题目描述 给定一个正整数N,求最小的.比N大的正整数M,使得M与N的二进制表示中有相同数目的1. 举个例子,假如给定的N为78,其二进制表示为1001110,包含4个1,那么最小的比N大的并且二进制表 ...
- CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...