实验一、初始化vue项目
【实验内容】
本实验主要主要讲述如何搭建一个vue项目的完整步骤。
【实验目的】
1、学习检查和安装node环境；
2、掌握如何搭建vue项目的步骤；
3、掌握vue项目目录的相关知识；
4、了解如何启动vue项目。
【实验步骤】
步骤1 检查和安装node环境；
步骤2 搭建vue项目环境；
步骤3 分析理解vue项目目录的结构；
步骤4 启动一个vue项目。
步骤1 检查和安装node环境
在终端输入命令检查是否安装成功：如果输出版本号，说明我们安装node环境成功，webide环境已预装node环境。
为了提高我们的效率可以使用淘宝的镜像，webide环境也已经预装，设置淘宝镜像源的命令：
npm config set registry=https://registry.npmmirror.com
步骤2 搭建vue项目环境
点击编辑器左侧目录选择Terminal->New Terminal，在终端执行命令：
cd /data
进入data文件夹后执行命令：
Vue create 项目名
如下图：
若你之前未保存过preset，或若不使用之前保存的preset创建项目，你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“Munually select features”即“手动选择特性”来选取需要的特性，这里我们选择手动选择特性。
选择之后会出现如下界面：
选择配置，看个人项目需求
Babel – ES6转换器；
TypeScript – 使用JS的超类语言TS；
Progressive Web App Support – PWA单页应用；
Router – 使用路由管理器；
Vuex – 使用 vue 状态管理器；
CSS Pre-processors – CSS预处理；
Linter / Formatter – Eslint 安装；
Unit Testing – 单元测试；
E2E Testing – 单元测试。
可以根据自己的需求，选择配置，空格键选择取消配置，我们这里是这么选如下图：
选完之后回车，选择vue版本，选择 2.x。
是否使用路由的 history模式，选择 yes。
选择css预处理器，请根据个人情况进行选择，这里我选择的是less。
选择 Eslint 的使用方式，我选择的 ESLint + Prettier。
选择语法检查方式，我自己选择保存就检测，第一个是保存检测，第二个是fix和commit的时候检测。
选择以上的配置文件放置的位置，把babel,postcss,eslint这些配置文件放哪，这里随便选。
是否保存以上的 preset 配置，可在将来创建项目的时候直接引用，我选择no。
确定后，等待下载依赖模块，时间可能会比较久。
步骤3 分析理解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
启动项目页面如下图：
如果启动项目后存在警告,可输入命令：
echo fs.inotify.max_user_watches=524288 | tee -a /etc/sysctl.conf && sysctl -p
