更新于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 项目)的更多相关文章

  1. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  3. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  4. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  5. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  6. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  7. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  8. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  9. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

随机推荐

  1. 2020牛客寒假算法基础集训营6 E.立方数(唯一分解定理 素数筛)

    https://ac.nowcoder.com/acm/contest/3007/E 放下题解 #include<bits/stdc++.h> using namespace std; t ...

  2. css权重及计算

    一.一般而言:!important--->行间样式--->id--->class | 属性--->标签选择器--->通配符 二.权重值 !important        ...

  3. 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 ...

  4. Vuejs+elementUI项目,在进行打包时,要注意的问题

    注意:打包之前,需要注意修改一些地方 (1)若是前后端分离开发的,前端开发过程中可能会在api.js中设置访问路径为服务器所在电脑的ip:端口,打包前,最好将它改回localhost:8080 (2) ...

  5. 跨站脚本(XSS)

    1.1 XSS定义 XSS,即为(Cross Site Scripting),中文名为跨站脚本,是发生在目标用户的浏览器层面上的,当渲染DOM树的过程发生了不在预期内执行的JS代码时,就发生了XSS攻 ...

  6. 论文阅读笔记(四)【TIP2017】:Video-Based Pedestrian Re-Identification by Adaptive Spatio-Temporal Appearance Model

    Introduction (1)背景知识: ① 人脸识别是具有高可靠性的生物识别技术,但在低解析度(resolution)和姿态变化下效果很差. ② 步态(gait)是全身行为的生物识别特征,大部分步 ...

  7. [POI2006] SZK-Schools - 费用流

    差不多就是个二分图带权匹配?(我还是敲费用流吧) 每个点向着自己能到的学校连边,费用按题意设定 跑最小费用最大流即可 #include <bits/stdc++.h> using name ...

  8. eclipse unable to start within 45 seconds

    在eclipse4.8.2中运行tomcat8.5项目时,提示出错: Server Tomcat v8.0 Server at localhost was unable to start within ...

  9. 获取mybaties插入记录自动增长的主键值

    首先在Mybatis Mapper文件中insert语句中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是保存主键值的属性. 例如: <in ...

  10. Vue 实例挂载的实现(六)

    Vue 中我们是通过 $mount 实例方法去挂载 vm 的,$mount 方法在多个文件中都有定义,如 src/platform/web/entry-runtime-with-compiler.js ...