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脚手架初次使用图文教程相关推荐

vue脚手架怎么用mysql_vue.cli脚手架初次使用图文教程
vue.cli脚手架初次使用图文教程我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好 ...
cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号方法一:直接在项目的package.json文件,找到dependencies就能看到了方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
Windows PowerShell安装指定版本vue/cli脚手架失效解决办法；vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
mac搭建vue项目看这篇打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...
1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
Vue学习（十一）Vue CLI脚手架
文章目录初始化脚手架说明步骤 Vue 脚手架创建项目文件说明 render函数脚手架中不同版本的Vue 脚手架启动注意 vue.config.js配置文件初始化脚手架说明 Vue脚手架是V ...

vue.cli脚手架初次使用图文教程

vue-cli作用

vue-cli使用

安装完成，目录树：

vue.cli脚手架初次使用图文教程相关推荐

最新文章

热门文章