(原)Vue 单文件组件安装 (创建vue-cli 项目)
更新于20200220
题外话:久违了我的博客园
正题:
1、准备工作,安装环境
1、安装node 官网下载安装即可 -- 配置环境变量
2、安装npm (基于node.js 包管理器)
3、安装cnpm (淘宝镜像,防止网速问题影响)
4、安装 vue-cli 脚手架 -----> cnpm install -g @vue/cli
5、安装webpack 打包工具 ----> cnpm install -g webpack
2、创建VUE 项目
环境安装好后,将盘符切换到想要的盘符,切换到存放项目的目录
2-1 第一种方式: 利用 hbuilderX 编辑工具创建图形化管理界面
1、启动vue 创建项目的图形化管理界面 ----> vue ui
2、在管理界面直接创建Vue 项目 》 包管理器选择为: npm 》 next 》 默认 》创建项目
3、关闭命令行和界面,即可重新进去开发项目
4、运行项目 -----> 在hbuilderX 》 运行 》运行到终端 》npm run serve
2-2 第二种方式: 利用doc ,vue-cli 脚手架搭建
1、vue init webpack projectname
ps: 如果报错,可以在改项目的目录下重新安装脚手架 cnpm install -gd vue-cli
2、安装过程中会出现几个自定义选项
3、安装成功发布运行:cnpm run dev
4、 如果上传到svn ,无需传node_modules;checkout 下来后,需要 cnpm install 运行即可
5、关于打包:cnpm run build ----> 获得dist 文件即可
Ps: 需要配置地址: config/index.js
___________________________________________________________________________________________________________________________________________________
絮絮叨叨
好啦,详细描述了安装vue 项目。我是经过了多次安装才摸索出来的,一开始安装时总会入坑,多试几次,就会熟练啦。
后续有什么相关知识再更新。
期待你的意见和见解。
(原)Vue 单文件组件安装 (创建vue-cli 项目)的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
随机推荐
- HTML与W3C
HTML:超文本标记语言 超文本包括:文字.图片.音频.视频.动画等 流程:写好HTML代码后通过浏览器(自动编译HTML代码)展现出效果 HTML优点: 世界知名浏览器厂商对HTML5的支持 微软 ...
- mysql执行顺序及左连接和右连接
SELECT语句执行顺序 SELECT语句中子句的执行顺序与SELECT语句中子句的输入顺序是不一样的,所以并不是从SELECT子句开始执行的,而是按照下面的顺序执行: 开始->FROM子句-& ...
- Python学习笔记四:主要图表
图表部分,很多要记忆的.以下来自于培训材料的记录. 但我个人觉得更重要的是要根据业务特点确定用什么样的图表,然后再去查具体的参数,光记住参数意义不是很大. import numpy as np imp ...
- JS中axios使用注意点
今天遇到这样一个问题,前端会同时弹出成功和失败的两个提示框,由于不是本人操作,也没有怀疑是前端代码的问题,就索性根据后端的日志作为分析依据,开始个人以为是后端接口上班了两次结果,一个是成功,另外一个是 ...
- linux下载phantomjs记录
step1:建目录: cd /root mkdir PhantomJS step2:下载phantomjs安装包 可以直接进网址下载到本地后,再传到linux路径,例如phantomjs-1.9.7- ...
- JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength 属性设置的值
在.net mvc的controller中,方法返回JsonResult,一般我们这么写: [HttpPost] public JsonResult QueryFeature(string u ...
- windows ltsc版本没有Microsoft Store怎么解决
[背景]以前一直都是使用windows的企业版,后来发现ltsc版本更好,这个好处在这里就不多说,懂的人自然会懂.但是发现很多应用都没有,包括Microsoft Store商店都没有.下面就是解决 ...
- 题解 AT859 【元素の系統名】
题目传送门. 介绍一种使用string字符串的方法. \(string\)是\(C++\).\(java\).\(VB\)等编程语言中的字符串,字符串是一个特殊的对象,属于引用类型. \(C++\)标 ...
- 走进电影院观看VTK
VTK影院模型: 从这个模型去介绍VTK的应用,整个电影院就是VTK的显示窗口(vtkRenderWindow),舞台就是VTK的渲染场景(vtkRenderer),场景中有不同的演员就是VTK的各种 ...
- C/C++ Windows API——获取系统指定目录(转)
原文地址:C/C++ Windows API——获取系统指定目录 经测试,在win10 VS2017中用wprintf()输出正常,SHGetSpecialFolderPath函数也正常运行 但是用M ...