Master Yang
Master Yang
5天前 · 2 人阅读

概述

本系列为长篇连载类,记录一个项目的孵化过程,内容包括开发环境,项目搭建,项目工程化等,其中项目工程化为主要部分。以基本的社交电商类网站为标准做工程化,包括但不限于路由配置,axios配置,全局数据配置,共通文件,工具文件,包外单配置文件,vue组件等。旨在传递工程化经验与思想。希望读者阅读前比较了解Vue,甚至使用过Vue其他的全家桶和IDE开发过demo。本篇文章的性质更接近于简易操作手册,有一定经验的人可以按照手册,快速搭建一个基本的工程化Vue项目。

开发环境

IDE:JetBrains WebStorm 2018.2 x64
        (有能力的请支持正版,先从官网下载软件本体,破解补丁推荐使用JetbrainsCrack-2.10-release-enc.jar,低版本破解补丁可能会闪退。不会破解的百度‘webstorm2018‘,某JB之家下面写的挺详细的,补丁包直接搜索‘JetbrainsCrack-2.10-release-enc.jar’应该就能找到。结尾点题,有能力的请支持正版,webstorm真的做的很好。不推荐打汉化补丁。)

工具脚手架等:node.js  npm  webpack  vue-cli  git 
        (这些到官网下载安装都免费的,vue-cli在下载完node后使用npm全局安装,npm现在下载node会捆绑一个,安装后别忘了配置环境变量,没安装过的可以去百度'软件名'+'安装教程')

技术栈:Vue  Vue-router  Vuex  axios
        (构建项目时自动安装的,或者构建后通过npm等包管理工具安装,不用急)

项目搭建

打开webstorm新建项目。
如果你node和webpack都安装了并且配置了环境变量,那么应该都自动填好了,接下来多点几次next就可以了

图1.webstrom-file-new-project

创建过程会提示安装一些常用包,不懂得可以百度下再选择是否安装,或者全部选 yes/默认项 就可以了。

图2.创建过程会提示安装一些常用包

使用npm还是yarn等包管理工具的选项,一半用npm较多,现在安装node时多会一同安装npm。

图3,选择npm包管理工具

最后完成,你将创建好了一个空的项目,右击选择package.json,选择show npm script 如图4

图4.展示框

双击dev开启测试运行,接口默认8080,如果已占用会自动换下一个接口(比起eclipse很智能),如图5

图5.运行测试服务

浏览器打开控制台提示的网址(蓝色那部分http://localhost:808X)。或者直接点击蓝字会默认浏览器打开。
显示如图6的网页,则证明你之前的操作基本正确。

图6.正确显示的空项目

安装vuex,axios。
打开项目目录文件夹,(需要安装git,没安装git的也可在IDE控制台执行命令)右键选择git base here 执行npm install vuex --save与npm install axios --save即可安装完成。
安装完成后一定要在直接或者间接在main.js中导入。至此我们基本需要东西基本安装完成。如图7。

图7.gitbasehere安装vuex与axios

项目工程化目录

        接下来的操作并不是你必须这样做,但这样做会是你的项目有更好的结构,有助于后期开发维护,某些公司可能会有自己的工程化习惯,但工程化思想基本一致。旧的老的项目可能工程化不完善,这会影响二次开发与维护。如果要做新的项目,最初的工程化对之后的开发效率有决定性的影响。

工程化项目目录概述
        如图2-1左框,这个下项目结构我会从上到下讲解一哈。根目录下我们主要编辑部分在src、static、index.html。src之上一般有build、config、node_modules三个文件夹,内含打包脚本,配置文件,工具包等,很少编辑。目录中图上有的而你新建的项目没有就说明那是我新建的,你也跟着新建目录或者文件就可以了。

src-assets中通常会存放一些静态文件,但请优先使用static文件夹存放、或者云存储。assets中存放的图片等在之后封装打包可能会产生问题。
src-components中存放vue文件,项目创建后这里有一个hollowword.vue,我们先不管这个文件。这个目录下我们至少需要再创建两个子目录,如图,我创建了page存放显示页面的vue,又创建了component存放vue组件
src-myAxios这个目录是我创建的,用来存放二次编辑的axios.js文件,文件夹中只有axios.js。这个文件的下面会详细讲解。
src-router中只有index.js,是路由配置文件,路由配置目前我主要使用过两种写法。下面会详解。
src-App.vue是随项目生成的底层vue文件,其中router-view作为视图显示位置。基本只在项目创建初编辑。
src-main.js是随项目生成的底层js文件,导入工具包,设置路由钩子,新建vue全局变量等在这里操作。

static下的css,img,js都是我新创建的,用来存放全局静态文件。
static-css-main.css是我创建的全局初始化css。用来清除浏览器默认样式,这里应该有公司使用的初始化css或者自己常用的初始化css。浏览器样式初始化应该是前端开发的基础,这里后面不再详解了。
static-config.js是静态单文件配置。作为不打包的配置文件,在不重新打包项目的情况下修改项目一些状态。

index.html是项目的本体,单页面网站项目实际是对index.html渲染产生复杂的结构。在此页面可使用script标签导入第三方js。并且应该在此页面设置meta和title等。项目创建初修改后很少编辑。

图2-1.工程化目录及导入式路由配置

下一篇:Vue工程化目录剖析-2 12月6日更新

收藏 0
工程化 vue js npm 安装 项目
评论 ( 0 )