vue-cli作用

vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程。

vue-cli使用

!!前提:需要vue和webpack

  1. 安装全局vue-cli

    npm install vue-cli -g
  2. 初始化,生成项目模板(my_project是项目名,自己随意)

    vue init webpack my_project
  3. 进入生成的项目文件夹

    cd my_project
  4. 初始化,安装依赖

    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脚手架初次使用图文教程的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  3. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  4. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  5. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  6. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  7. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  8. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  9. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

随机推荐

  1. purge旧的ubuntu 的linux内核

    https://www.sysgeek.cn/remove-old-kernels-ubuntu-16-04/

  2. Matlab中simulink的state space模块

    %列写状态空间表达式矩阵 A=[- -;]; B=[ ; ]; C=[ ; ]; D=[ ; ]; %得到传递函数表达式 [num, den]=ss2tf(A, B, C, D, ); %在命令行打印 ...

  3. 在 Angular6 中使用 HTTP 请求服务端数据

    第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...

  4. JS学习笔记Day12

    一.浏览器的默认行为以及阻止行为 (一)右键菜单事件:oncontextmenu: 阻止:return false: (二)超链接的默认行为:跳转: 阻止:标准浏览器:event.preventDef ...

  5. layui加载层

    layer.load(1, { shade: [0.5, '#000'], //0.5透明度的灰色背景 content: '注册中...', success: function (layero) { ...

  6. 启动多个logstash脚本

    一台服务器上启动多个logstash脚本 # more logstash_click #!/bin/sh # Init script for logstash # Maintained by Elas ...

  7. Python list和 np.Array 的转换关系

    一.List转String 1.str list转 string a_list = ["h","e","l","l",& ...

  8. openstack项目【day23】:keystone组件网关协议

    本节内容 一 静态页面和动态页面 二 什么是web server 三 什么是网关协议 3.1 引子 3.2 网关协议 四 网关协议CGI.FastCGI.WSGI.UWSGI 五 网关协议与keyst ...

  9. EF CodeFirst系列(6)---配置1对1,1对多,多对多关系

    这一节介绍EF CodeFirst模式中的1对0/1,1对多,多对多关系的配置,只有梳理清楚实体间的关系,才能进行愉快的开发,因此这节虽然很简单但是还是记录了一下. 1. 1对0/1关系配置 1. 通 ...

  10. jQuery1.9及以上版本检测IE版本号

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...