vue项目搭建流程

1、安装node.js

下载地址：https://nodejs.org/zh-cn/

界面展示

2、检查node.js版本

查看版本的两种方式

• 1|node -v
• 2|node -version

如果出现版本号，则安装将成功（最新版本基于官方网站）

3为了提高效率，我们可以使用淘宝的镜像源。

• 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源
• 稍后将使用它。npm这个地方是直接使用的。cnpm更换它很好，因为如果没有镜像源，安装速度相对较慢。

检查安装是否成功： cnpm -v

二、搭建vue环境

1，全局安装vue-cli

此处注意：安装vue-cli对node.js版本是必需的。

有两种打包方式：输入cmd命令

• 1|npm install -g @vue/cli //从国外下载的速度较慢。
• 2|cnpm install -g @vue/cli //这是从镜像源下载的

查看安装的版本（显示版本号表示安装成功）

• 1|vue --version

如果您有原始版本或版本相对较低，您可以升级它。

• 1|npm update -g @vue/cli
• 2|yarn global upgrade --latest @vue/cli

三、创建vue项目

1、用cmd创建项目的命令

1.1创建文件

以管理员身份打开命令行界面，然后输入要在其中创建项目的任何文件夹。

输入： vue create vue01

1.2选择配置信息

通过上下方向键选择相应的配置，然后进入车内。

按空格键选择要安装的配置资源， * 已选择指令数。

1.3选择版本

上下方向键选择版本，这里我们选择vue2，然后进入车内。

1.4路径模式选择

在这里您可以直接输入 no/n

1.5语法代码格式检查。

代码检查，只需选择标准，切换方向键，选择空格键并输入

代码检查时间、方向键开关、空格键选择和输入

1.6第三方文件的存在方式

1.独立文件 2.综合的

1.7是否保存此配置信息（保存预设）

如果选择在此处保存，则必须输入名称。默认值是文件夹的名称。此文件配置的选项将在下次配置时显示，就像上面所述，并且在配置过程中还会添加一个选项。

1.8创建成功

Successfully created project vue01此说明出现并已成功创建。

1.9运行

cd到项目文件夹下

cd vue01

输入运行文件的代码。
npm run serve

1.10启动

您可以通过在浏览器中输入相应的网址来查看界面。
http://localhost:8080/

1.11停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

2、用vue资源管理器创建

2.1进入vue资源管理器界面(vue ui界面）

cmd命令，因为它是全局的，所以可以在任何地方打开。注意：运行时不能关闭cmd窗口，否则服务将停止。如果电脑卡住了，可以直接在浏览器中输入：http://localhost:8000/
vue ui

2.2创建文件

这里直接create 创建文件

2.3配置信息

和用cmd填写下一步后，顺序类似

2.4配置预设

选择或自定义预设，然后下一步是完成创建。

2.5开始运行项目

逐步：任务>serve>运行>启动

四、Vue-cli项目中每个文件夹和文件的使用。

• dist 文件夹：默认 npm run build 该命令打包生成的用于生产部署的静态资源文件。
• node_modules：存放npm该命令下载开发和生产环境的依赖包。
• public：有的叫assets：存储项目中所需的资源文件，css、js、images以及index
• src文件夹：存储要引用的项目源代码和资源文件
• src-api文件夹：放置ajax相关操作的代码文件:index.js(相关接口),ajax.js(封装的axios,拦截器)。有的叫service：自行配置vue请求后台接口方法
• src-common文件夹：stylus混合文件.styl，不要写public也可以
• src-components文件夹：存储vue从开发中提取的一些常见组件
• src-mock文件夹：mock数据存储文件和mock模拟接口（无后台接口或不完整接口可模拟后台接口）
• src-pages文件夹：路由中涉及的组件
• src-router文件夹:vue-router，路由器和路由配置
• src-store文件夹：存储 vue中的状态数据vuex集中管理
• App.vue文件：使用标签渲染整个项目。.vue组件
• main.js文件：vue-cli项目的条目文件。
• package.json文件： node_modules资源部 和 启动、打包项目。 npm 命令管理
• build 文件夹：用于存储 webpack 相关配置和脚本。仅在开发中 偶尔使用 到此文件夹 webpack.base.conf.js 用于配置 less、sass等css预编译或配置库。 UI 库
• config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹 config.js 配置开发环境。 端口号，是否打开热加载 或者 设置生产环境的静态资源相对路径，无论是否打开。gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。