vue.cli脚手架初次使用图文教程
vue-cli作用
vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程。
vue-cli使用
!!前提:需要vue和webpack
安装全局vue-cli
npm install vue-cli -g
初始化,生成项目模板(my_project是项目名,自己随意)
vue init webpack my_project
进入生成的项目文件夹
cd my_project
初始化,安装依赖
npm install
安装完成,目录树:
run:
npm run dev
浏览器会自动打开到http://localhost:8080/#/ ,会看到欢迎页:
上面是在本地运行,服务器上运行:
npm run build
生成静态文件:
打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:
说明引用路径错了,需要手动修改:
进入config/index.js
原配置中的引用路径是’/’(根目录):
修改为’./’(当前目录):
run:
npm run build
Done:
vue.cli脚手架初次使用图文教程的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
随机推荐
- purge旧的ubuntu 的linux内核
https://www.sysgeek.cn/remove-old-kernels-ubuntu-16-04/
- Matlab中simulink的state space模块
%列写状态空间表达式矩阵 A=[- -;]; B=[ ; ]; C=[ ; ]; D=[ ; ]; %得到传递函数表达式 [num, den]=ss2tf(A, B, C, D, ); %在命令行打印 ...
- 在 Angular6 中使用 HTTP 请求服务端数据
第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...
- JS学习笔记Day12
一.浏览器的默认行为以及阻止行为 (一)右键菜单事件:oncontextmenu: 阻止:return false: (二)超链接的默认行为:跳转: 阻止:标准浏览器:event.preventDef ...
- layui加载层
layer.load(1, { shade: [0.5, '#000'], //0.5透明度的灰色背景 content: '注册中...', success: function (layero) { ...
- 启动多个logstash脚本
一台服务器上启动多个logstash脚本 # more logstash_click #!/bin/sh # Init script for logstash # Maintained by Elas ...
- Python list和 np.Array 的转换关系
一.List转String 1.str list转 string a_list = ["h","e","l","l",& ...
- openstack项目【day23】:keystone组件网关协议
本节内容 一 静态页面和动态页面 二 什么是web server 三 什么是网关协议 3.1 引子 3.2 网关协议 四 网关协议CGI.FastCGI.WSGI.UWSGI 五 网关协议与keyst ...
- EF CodeFirst系列(6)---配置1对1,1对多,多对多关系
这一节介绍EF CodeFirst模式中的1对0/1,1对多,多对多关系的配置,只有梳理清楚实体间的关系,才能进行愉快的开发,因此这节虽然很简单但是还是记录了一下. 1. 1对0/1关系配置 1. 通 ...
- jQuery1.9及以上版本检测IE版本号
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...