美文网首页
Vue-cli脚手架新手教程入门

Vue-cli脚手架新手教程入门

作者: GeekShow | 来源:发表于2018-06-19 11:51 被阅读23次

直接切入正题

一.安装

因为Vue全家桶都需要nodejs环境支持的所以我们需要先从官网上下载最新版本的nodejs

链接如下:https://nodejs.org/en/直接下载电脑对应的版本即可。
安装完之后打开电脑的cmd命令行(mac or linux 用户同理)。
首先需要安装webpack工具(webpack用来打包我们的项目)
运行命令:

npm install webpack -g 

等待下载安装完毕即可
如果速度较慢可以安装cnpm的国内淘宝映像,网络速度因人而异。
安装完webpack工具之后可以使用

webpack -v

命令查看电脑是否正确安装完成
接下来使用命令

npm install vue-cil -g

下载 vue脚手架工具
同理安装完毕之后使用

vue -V

命令查看是否正确安装。
至此vue手脚架工具安装完毕

二.小试牛刀

接下来在自己的项目文件夹里右键git bash here工具(当然你也可以使用cmd切换到你的项目文件夹里,如果有耐心的话)

在命令行里运行 git bash
其中vueapp是我起的项目文件名称,可以随意更改

之后再运行

npm install 

这句话的意思是安装下我们项目需要的nodejs插件以保证项目能正常运行
下面的几个问题可以先行回车代替后面有时间我们再详细讨论
这里需要注意的是,我们的项目文件夹最好不要用中文,我为了演示方便才没改,这里一定要注意下。

三.查看项目

我们的项目文件已经生成好了,但是我们似乎又无处下手,这么多的文件我们到底在哪里写我们的代码呢?


捕获1.PNG

这里给大家分析一下
build文件夹主要是用来对我们的项目打包来进行的一些设置
config文件夹是用来对我们的测试环境的设置
node_modules则包含了我们项目使用的nodejs插件
src则是我们的代码文件夹 我们的一切代码都要卸载src文件夹里面
剩余的我就不介绍了都是一些项目配置文件以及单元测试文件选项

四.运行本地开发环境

进入我们的vueapp文件夹中然后在git bash键入

npm run dev 

稍等片刻后


捕获3.PNG

我们可以打开浏览器看到我们的项目了


捕获4.PNG

五.打包发布

在本地上测试我们的项目肯定还是不够的,我们的web项目肯定是要部署到服务器里面的
首先我们需要打开config/index.js将里面的assetsPublicPath设置为assetsPublicPath: '/'
然后在命令行里运行

npm run build

稍等片刻会发现我们的项目文件夹里多了个dist文件夹

捕获11.PNG
理论上文件是可以直接扔到服务器的项目根目录直接用的,但是发现存在目录路径问题
打开index.html文件
发现格式很乱 使用vscode的格式化快捷键shift+alt+f 格式化代码
捕获222.PNG
然后在三个<script>标签的src后加上一个.
上面的link后面的href后加上一个.

END

至此,基于vue-cil的项目构建过程就完成了,小伙伴赶紧在自己的src文件夹里大展宏图吧

相关文章

  • vue入门教程

    Vue-cli入门教程 vue-cli是官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目 ...

  • Vue.js重构有赞商城-配置

    1. 搭建脚手架 Vue-cli官方教程Vue.js安装教程 yarn global add vue-cli脚手架...

  • Vue-cli脚手架新手教程入门

    直接切入正题 一.安装 因为Vue全家桶都需要nodejs环境支持的所以我们需要先从官网上下载最新版本的nodej...

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,这篇文章主要介绍了vue-cli脚手架的安装教程图解 ...

  • vue-cli基础知识

    什么是vue-cli 慕课网教程vue-cli官网vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭...

  • vue搭建笔记

    如何搭建安装vue环境? 请看教程 Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) w...

  • 脚手架安装

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) 2017.03.01 10:34*字数...

  • 前端学习笔记Vue入门

    Vue.js入门教程 参考文献 Vue-Cli webpack打包入门:http://www.cnblogs.co...

  • 基于vue-cli搭建vue项目开发环境

    前言:     手里面有一套vue的教程,因为之前了解到vue-cli脚手架工具,搭建项目很方便,但是教程中是自己...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

网友评论

      本文标题:Vue-cli脚手架新手教程入门

      本文链接:https://www.haomeiwen.com/subject/lwcaeftx.html