实验一、初始化vue项目

【实验内容】

本实验主要主要讲述如何搭建一个vue项目的完整步骤。

【实验目的】

1、学习检查和安装node环境;

2、掌握如何搭建vue项目的步骤;

3、掌握vue项目目录的相关知识;

4、了解如何启动vue项目。

【实验步骤】

步骤1 检查和安装node环境;

步骤2 搭建vue项目环境;

步骤3 分析理解vue项目目录的结构;

步骤4 启动一个vue项目。

步骤1  检查和安装node环境

在终端输入命令检查是否安装成功:如果输出版本号,说明我们安装node环境成功,webide环境已预装node环境。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

为了提高我们的效率可以使用淘宝的镜像,webide环境也已经预装,设置淘宝镜像源的命令:

npm config set registry=https://registry.npmmirror.com

 

步骤2  搭建vue项目环境

点击编辑器左侧目录选择Terminal->New Terminal,在终端执行命令:

cd /data

进入data文件夹后执行命令:

Vue create 项目名

 

如下图:

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

若你之前未保存过preset,或若不使用之前保存的preset创建项目,你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“Munually select features”即“手动选择特性”来选取需要的特性,这里我们选择手动选择特性。

选择之后会出现如下界面:

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选择配置,看个人项目需求

Babel – ES6转换器;

TypeScript – 使用JS的超类语言TS;

Progressive Web App Support – PWA单页应用;

Router – 使用路由管理器;

Vuex – 使用 vue 状态管理器;

CSS Pre-processors – CSS预处理;

Linter / Formatter – Eslint 安装;

Unit Testing – 单元测试;

E2E Testing – 单元测试。

可以根据自己的需求,选择配置,空格键选择取消配置,我们这里是这么选如下图:

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选完之后回车,选择vue版本,选择 2.x。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

是否使用路由的 history模式,选择 yes。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选择css预处理器,请根据个人情况进行选择,这里我选择的是less。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选择 Eslint 的使用方式,我选择的 ESLint + Prettier。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选择语法检查方式,我自己选择保存就检测,第一个是保存检测,第二个是fix和commit的时候检测。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

选择以上的配置文件放置的位置,把babel,postcss,eslint这些配置文件放哪,这里随便选。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

是否保存以上的 preset 配置,可在将来创建项目的时候直接引用,我选择no。

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

确定后,等待下载依赖模块,时间可能会比较久。

步骤3  分析理解vue项目目录的结构

Vue项目创建成功后的目录如下图:

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

1、node_modules:npm 加载的项目依赖模块。

2、public:index.htm,首页入口文件,可以添加一些 meta 信息等

3、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

(1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

(2)components:组件目录,我们写的组件就放在这个目录里面;

(3)router:前端路由,我们需要配置的路由路径写在index.js里面;

(4)store:vuex状态管理,我们需要配置的路由路径写在index.js里面;

(4)App.vue:根组件;

(5)main.js:入口js文件;

4、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息。

5、README.md:项目的说明文档,markdown 格式。

步骤4  启动一个vue项目

执行命令,进入指定的项目文件夹。

cd /data
cd ./项目名

在项目中新建一个vue.config.js文件,添加相应的配置:

module.exports = {
    // 部署应用时的基本URL
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist', // 打包位置
    assetsDir: 'assets', // 打包后静态资源位置
    lintOnSave: false,
    devServer: {
        // open: true,  // 自动打开
        // host: '0.0.0.0',
        port: 5500, // 设置默认端口号
    }
}

 

在终端中输入命令:

npm run serve

 

启动项目页面如下图:

web前端开发之后台管理系统实战(vue)——实验一、初始化vue项目

如果启动项目后存在警告,可输入命令:

echo fs.inotify.max_user_watches=524288 | tee -a /etc/sysctl.conf && sysctl -p

相关新闻

联系我们

027-87870986

在线咨询:点击这里给我发消息

邮件:931234110@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信