(原)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. 就是很简 ...
随机推荐
- 2020牛客寒假算法基础集训营6 E.立方数(唯一分解定理 素数筛)
https://ac.nowcoder.com/acm/contest/3007/E 放下题解 #include<bits/stdc++.h> using namespace std; t ...
- css权重及计算
一.一般而言:!important--->行间样式--->id--->class | 属性--->标签选择器--->通配符 二.权重值 !important ...
- ZOJ 4082 Little Sub and his Geometry Problem题解
题意 f(u,v):x小于等于u且y小于等于v的点才对f有贡献,每个这样的点贡献(u-x)+() 思路 =f(u_2,v_2)" class="mathcode" src ...
- Vuejs+elementUI项目,在进行打包时,要注意的问题
注意:打包之前,需要注意修改一些地方 (1)若是前后端分离开发的,前端开发过程中可能会在api.js中设置访问路径为服务器所在电脑的ip:端口,打包前,最好将它改回localhost:8080 (2) ...
- 跨站脚本(XSS)
1.1 XSS定义 XSS,即为(Cross Site Scripting),中文名为跨站脚本,是发生在目标用户的浏览器层面上的,当渲染DOM树的过程发生了不在预期内执行的JS代码时,就发生了XSS攻 ...
- 论文阅读笔记(四)【TIP2017】:Video-Based Pedestrian Re-Identification by Adaptive Spatio-Temporal Appearance Model
Introduction (1)背景知识: ① 人脸识别是具有高可靠性的生物识别技术,但在低解析度(resolution)和姿态变化下效果很差. ② 步态(gait)是全身行为的生物识别特征,大部分步 ...
- [POI2006] SZK-Schools - 费用流
差不多就是个二分图带权匹配?(我还是敲费用流吧) 每个点向着自己能到的学校连边,费用按题意设定 跑最小费用最大流即可 #include <bits/stdc++.h> using name ...
- eclipse unable to start within 45 seconds
在eclipse4.8.2中运行tomcat8.5项目时,提示出错: Server Tomcat v8.0 Server at localhost was unable to start within ...
- 获取mybaties插入记录自动增长的主键值
首先在Mybatis Mapper文件中insert语句中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是保存主键值的属性. 例如: <in ...
- Vue 实例挂载的实现(六)
Vue 中我们是通过 $mount 实例方法去挂载 vm 的,$mount 方法在多个文件中都有定义,如 src/platform/web/entry-runtime-with-compiler.js ...