文档章节

Vue环境搭建并创建项目

工作流流流流流
 工作流流流流流
发布于 09/04 09:28
字数 664
阅读 8
收藏 0

1: Node.js安装
    判断是否安装成功 : node -v
    
    在nodejs的安装目录E:\nodejs\下,新建node_global和node_cache两个文件夹
    
    执行指令:

        npm config set prefix "E:\nodejs\node_global"
        npm config set cache "E:\nodejs\node_cache"
        
    设置成功后,后续用命令npm install -g XXX安装的XXX模块就在D:\nodejs\node_global\node_modules里。

    查看配置信息指令:npm config list
    
    添加用户变量PATH:E:\nodejs\node_global
    新增系统变量NODE_PATH:E:\nodejs\node_global\node_modules


2:安装cnpm

    
    使用NPM安装

    —NPM: NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

    由于 NPM 安装速度慢(服务器在国外),这里使用淘宝的镜像及其命令 cnpm , 安装淘宝的镜像: 
    打开cmd命令框,输入 
    npm install -g cnpm –registry=https://registry.npm.taobao.org 
    
判断是否安装成功 : npm -v


3. 安装vue
        安装Vue   cnpm install vue -g
        安装vue命令行工具,即vue-cli 脚手架  cnpm install vue-cli -g
        
        全局卸载:npm uninstall vue-cli -g;
    
    测试  vue --version


创建项目   vue init webpack  ”项目名称“

安装 elementUI
npm i element-ui -S

npm uninstall element-ui


安装axios:npm install axios
卸载axios:npm uninstall axios


下载webpack脚手架
(1) 下载指令:vue init webpack learnVue

    其中webpack是打包和压缩的工具模板,learnVue是工程文件夹名称
    执行完会在当前目录下生成一个名为工程名称的文件夹,并下载好了模板,但相关依赖还没有安装
(2) 执行指令后会先提示下载中,大概几秒后会提示输入工程的相关信息:

    project name:工程名(不是文件夹名),不可以含有大写字母,后续是页面的title
    vue-router:vuejs提供的路由工具,我选择安装,相关介绍可戳这里
    ESLint:好像是一个语法检查选项,我不安装
    unit tests和e2e tests:好像都是测试项,我也没有安装
    最后一个选项是推荐相关依赖后续使用npm install指令安装,选择Yes, use npm
(3) 然后等待一段时间即完成下载

这里是sublime text 3安装vue插件方法:

1)ctrl+shift+p

2)选择第一项 Install package 

3)然后不久就会弹出另一个界面,然后选择Vue.js Snippets,然后重复1) 2)操作 选择 Vue.js Syntax Hightlight

4)关掉sublime,重新打开,就会发现他可以识别后缀为 .vue的文件的语法了

    

© 著作权归作者所有

工作流流流流流
粉丝 17
博文 8
码字总数 4008
作品 0
郑州
程序员
私信 提问
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
222
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
2018/05/09
0
0
webpack4手动搭建Vue开发环境实现todoList项目

前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己...

茉莉灬纯洁的白
05/16
0
0
Vue-CLI 3.x 自动部署项目至服务器

前言 平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 ...

nxmin
04/01
0
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
2018/10/17
290
0

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
31分钟前
2
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
33分钟前
2
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
41分钟前
4
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
47分钟前
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
58分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部