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

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

我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了。在youtube上看了一vue的相关教程，还是需要实操的。

好像安装过npm -v 发现已经安装了5.6.0

需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码：npm install -g vue-cli

一.生成项目

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack vue-testone

cd vue-testone

npm install (or if using yarn: yarn)

npm run lint -- --fix (or for yarn: yarn run lint --fix)

npm run dev

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / ')，是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件，就得修改文件路径。

二.打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。

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

vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
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脚手架
文章目录初始化脚手架说明步骤 Vue 脚手架创建项目文件说明 render函数脚手架中不同版本的Vue 脚手架启动注意 vue.config.js配置文件初始化脚手架说明 Vue脚手架是V ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号方法一:直接在项目的package.json文件,找到dependencies就能看到了方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
Vue学习（常用实例、脚手架搭建）-学习笔记
文章目录 Vue学习(常用实例.脚手架搭建)-学习笔记实例1 法1 法2 实例2 脚手架搭建 vue-cli2.0 vue-cli4.0 Vue学习(常用实例.脚手架搭建)-学习笔记附加:阿里巴巴 ...
从0到1搭建一个自己的cli脚手架
从0到1搭建一个自己的脚手架源码地址什么是脚手架顾名思义,脚手架就是帮助我们配置一些环境.工具,能够让我们方便的直接开始开发,专注于我们的业务,不用花时间去配置开发环境.例如常见的vue-cli ...
从零开发cli脚手架
这是一篇篇幅很长的文章,分为四个部分,每个部分都可以单独食用. 使用npm发布插件包学习使用commander.js插件学习使用inquirer.js插件在vue-cli基础上封装一个cli 1 ...

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

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

最新文章

热门文章