Vue-Cli 脚手架搭建 Vue项目

news2024/12/28 19:20:31

本篇目开始进行Vue基于项目中的介绍，Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具，可以前往在线官网查看：—— 官方文档 | Vue CLI 。

安装npm

1. 检测是否安装了Node.js ，未安装请前往下载；

2. 检测npm，Node自带npm包管理器；

npm 可更新最新版本，命令如下：

npm install -g npm

安装 vue-cli (脚手架)

方式一：

1 ）使用如下命令安装vue-cli脚手架；

npm i -g vue-cli

2 ）安装完成检测；

vue -V

方式二：

如下载网络会出现问题时，可以使用淘宝镜像，命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

用cnpm安装vue-cli（脚手架）：

cnpm i -g @vue/cli

创建 Vue 项目

1. 使用脚手架（vue-cli）创建Vue项目，命令如下：(test是项目名称)；

vue create test

出现如下界面：

Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
Manually select features:自定义添加选择功能。

2. 选择第三项自定义添加 —— 点击【空格】进行选择/取消

一般会挑选：【 Babel / Router / Vuex / CSS Pre-processors / Linter /Formatter 】

Babel：js编译器

Typescript：js的超集

Progressive Web App Support: 渐进式的网页应用程序

Router: vue的路由

Vuex: vue的状态管理

CSS Pre-processors: css的预处理器

Linter/Formatter: 代码风格检测与格式化

Unit Testing: 单元测试

E2E Testing: 端对端测试

3. 按照需求选择 Vue 的版本；

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

4. 选择【路由模式】；

选择【路由模式】：如果选择history模式则输入【y】反之输入【n】；

[ 路由有两种模式：hash 和 history ，hash是带有#，而history则没有，但需要配置解决404； ]

5. 选择CSS的预编译器：

有这三种主流的CSS预编译器：Sass / Less / Stylus ；

6. 选择linter/formater配置:

ESLint with error prevent only : ESLint仅具有错误防止

ESLint + Standard config ：选则标准配置

选择后会出现如下界面：

选择【第一项】可以在编写代码的时候提示错误；

紧接着会出现如下界面进行选择这些配置的存放：选择存放到 packpage.json 当中：

接下来会出现如下界面：可以设置保存设置为moren,下次再次创建项目时便会多出一个moren选项，不需再次配置即可直接使用;

最好等待项目创建完成即可：

以上就已经将项目创建完成，下面来进行运行项目，将项目跑起来！

运行项目

cd test 到项目的目录下，通过如下命令运行：

npm run serve

如果可以看到如上的两图的效果，则项目已经运行起来了，下面来到浏览器当中输入这个地址就可以访问到该项目了：

http://localhost:8080/

以上就是通过vue脚手架（vue-cli）搭建test项目的全部内容了；那么对于项目的内容编写就是后续，通过之前所讲的内容融入项目当中来使用！

附加补充

进入目录打开package.json文件进行查看：

这里有三个分别对应的是：

npm run serve —— 开发环境构建（在开发时候进行项目运行使用）
npm run build —— 生产环境构建（在项目上线的时候使用，对项目进行压缩）
npm run lint —— 代码检测工具（代码格式出错可以通过该命令解决）

这里可以将开发环境构建进行修改 —— start

在开发运行的时候可以通过【npm run start】或者【npm start】命令进行运行；

项目入口文件 main.js

在前面的篇目当中都未涉及到以项目的形式，均是通过一个 .html 文件，内容是如下这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
    new Vue({
        el:'#app',
        data:{
            // 数据
        },
        methods:{
            // 方法
        }
    })
</script>
</body>
</html>

那么现在我们是在项目当中，可以在项目入口文件main.js中查看：