vue项目结构

Posted 0zcl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目结构相关的知识,希望对你有一定的参考价值。

前言: 初学Vue是有一定的学习成本的。比如我刚开始接触Vue时,我还未接触node.js,脚手架webpack。在安装时就遇到了难题。vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。

一、安装Node环境

node.js官网下载稳定版本,我是在Windows下安装的。

技术分享图片
 

下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。

检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功

技术分享图片
 

二、安装vue-cli

打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-cli

(注:npm会有点慢,建议更改为国内淘宝的镜像,只换源即可。在cmd输入命令:npm config set registry https://registry.npm.taobao.org)

构建vue-cli项目

1、创建项目

打开cmd,进入想要创建项目的目录下,输入:vue init webpack projectname

projextname是自定义的项目名称,例:我这里命名为vuedemo

技术分享图片
 

命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图

技术分享图片
创建vue-cli项目

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式,一般默认选择第一种

Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

2、安装依赖

项目创建完成,打开文件夹可以看到目录结构如下

技术分享图片
未安装依赖时项目结构  

此时,项目已经初具雏形,但还未安装依赖。安装依赖库就是node_modules目录下一堆的库。这里你先简单理解为项目运行所需的东西就好。打开cmd,进入项目所在根目录下,输入npm install,回车,如果网络不好,需要一段时间。

技术分享图片
依赖安装中
技术分享图片
依赖安装结束

我们此时再打开项目文件夹,可以看到多了node_modules文件夹,里面是各种需要的依赖包

技术分享图片
安装依赖后项目结构  

3、运行项目

打开cmd,进入到项目所在目录下,输入npm run dev,回车,启动项目

技术分享图片
 

完成后,浏览器会自动打开,监听端口8080

技术分享图片
 

可以在浏览器看到如下画面,恭喜你,已成功构建vue-cli项目,接下来就可以开始开发啦

技术分享图片
成功了

你也许初学,不懂webpack,node.js,vue.cli,OK,没关系,照着这篇文章一步步做下来,安装webpack,npm,node,vue.cli,最终能运npm dev run运行项目即可。至少你现在能访问vue项目的页面了。

以上是关于vue项目结构的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli入门——项目结构

vue-cli入门——项目结构

Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

vue项目结构

vue的前端目录结构

vue证明题三,vue项目的包结构和配置