vue项目结构

Posted 2021-01-21 0zcl

前言: 初学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项目的页面了。