vue手脚架搭建项目介绍_VUE-CLI脚手架的搭建过程

妖狐艹你老母 2023-01-01 05:52 155阅读 0赞

1、安装node js

下载地址：http://nodejs.cn/download/

2、安装完成后运行Node.js command prompt(node -v查看安装版本)

![Image 1][]

3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v查看版本)

![Image 1][]

4、注册cnpm来代替npm

使用命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

如果你发现你安装成功了，使用cnpm却发现找不到命令，那么就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如";C:\\Program Files\\nodejs\\node\_modules"

5、安装vue脚手架vue-cli

命令：cnpm install -g vue-cli

安装成功后可以用 vue -V查看vue版本

6、cd到对应的目录下初始化vue项目

命令：vue init webpack my-project

Project name 项目名

Project description 项目名描述

Author 作者邮箱

Use ESLint to lint your code? 是否需要ESlist语法检查

Setup unit tests with Karma + Mocha? 是否需要单元测试

Setup e2e tests with Nightwatch? Yes是否需要e2e测试

7、package.json为项目依赖资源，如果要运行这个项目需要使用cnpm install 安装依赖项(直接在项目文件夹路径下执行)

8、使用命令cnpm run dev启动项目，浏览器会打开 http://localhost:8080/\#/ 看到以下效果

![Image 1][]

开发时属于热部署状态，代码保存后浏览器会自动刷新，错误提示也非常友好。

9、编译打包cnpm run build

会编译打包到项目dist文件夹下，然后我们就可以部署到服务器上(注意：如果你直接打开index.html，可能页面会是一片空白，这是由于你引用的js路径有问题)

![Image 1][]

10、安装axios插件

cnpm install axios//生产环境

npm install --save axios vue-axios//测试环境

两者都下载

在 main.js 中写入以下内容：

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在页面中的用法：

Vue.axios.get(api).then((response) => \{

console.log(response.data)

\})

this.axios.get(api).then((response) => \{

console.log(response.data)

\})

this.$http.get(api).then((response) => \{

console.log(response.data)

\})

或者在 main.js 中写入以下内容：

import axios from 'axios'

Vue.prototype.$axios = axios

使用页面

this.$axios.get(api).then((response) => \{

console.log(response.data)

\})

11、安装jquery依赖

npm install jquery --save

在 main.js 中写入以下内容：

import $ from 'jquery'

12、脚手架目录介绍

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue脚手架搭建

vue2:脚手架搭建简介 vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是...

朱雀/ 2024年04月17日 05:42/ 0 赞/ 105 阅读

相关 VUE-脚手架搭建

文章目录一、概述二、前提准备 1. 安装 node-js 2. npm 镜像设置 3. 安装 vs-code

亦凉/ 2024年02月21日 09:31/ 0 赞/ 92 阅读

相关 vue进阶：基于vue-cli3.x创建项目（搭建手脚架）

参考：[https://www.cnblogs.com/ZheOneAndOnly/p/11202844.html][https_www.cnblogs.com_ZheOne

左手的ㄟ右手/ 2023年06月11日 10:28/ 0 赞/ 18 阅读

相关 vue脚手架搭建

vue脚手架搭建一、安装vue npm install vue -g 二、安装vue-router npm install vue-route

布满荆棘的人生/ 2023年03月01日 09:42/ 0 赞/ 240 阅读

相关使用脚手架搭建vue项目

1.查看版本号先安装node,查看是否安装成功 node -v 2.查看安装版本 npm -v， 3.node安装成功后，安装脚手架vue cli vue

爱被打了一巴掌/ 2023年01月23日 05:51/ 0 赞/ 193 阅读

相关 vue手脚架搭建项目介绍_VUE-CLI脚手架的搭建过程

1、安装node js 下载地址：http://nodejs.cn/download/ 2、安装完成后运行Node.js command prompt(node -v查看安

妖狐艹你老母/ 2023年01月01日 05:52/ 0 赞/ 156 阅读

相关 vue 脚手架的搭建过程

1、安装node.js 2、下载 cnpm 目的是安装时速度提升，下载路径如下： npm install -g cnpm --registry=https:

太过爱你忘了你带给我的痛/ 2022年12月03日 09:16/ 0 赞/ 193 阅读

相关 vue脚手架搭建

vue脚手架是个好东西，能够快速搭建vue单页面应用，vue是基于node环境的，所以要先安装node,去官网下载安装就可以。 node官网为：https://nodejs.

淡淡的烟草味﹌/ 2022年05月23日 08:18/ 0 赞/ 312 阅读

相关 vue项目中搭建脚手架

一、安装 1.安装nodejs（自带npm） 2.安装cnpm 命令窗口:npm install -g cnpm \--registry=https://regis

朴灿烈づ我的快乐病毒、/ 2022年02月13日 09:59/ 0 赞/ 314 阅读

相关搭建Vue脚手架

一、安装vue-cli 安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安

野性酷女/ 2021年12月04日 02:25/ 0 赞/ 442 阅读