更新于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. 精心收集java基础106条

    Java基础 1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 一个Java源文件中可以定义多个类,但最多只能定义一个public的类,并且public ...

  2. 2020牛客寒假算法基础集训营6 C 汉诺塔 (dp 最长下降子序列)

    https://ac.nowcoder.com/acm/contest/3007/C 将木板按照Xi从小到大排序,将这时的Yi数列记为Zi数列,则问题变成将Zi划分为尽可能少的若干组上升子序列. 根据 ...

  3. react-native构建基本页面3---路由配置

    安装路由 运行yarn add react-native-router-flux 路由官网 路由相关配置 路由简单的DEMO // Main 才是项目的根组件 import React, { Comp ...

  4. 自定义Keras Layer

    Keras的Layer其实就是一个Class, 要具有以下几个方法: (1) build(input_shape): 定义权重的地方, 如果不需要定义权重, 也要有self.built = True; ...

  5. 梯度下降算法&线性回归算法

    **机器学习的过程说白了就是让我们编写一个函数使得costfunction最小,并且此时的参数值就是最佳参数值. 定义 假设存在一个代价函数 fun:\(J\left(\theta_{0}, \the ...

  6. base(根URL)

    指定用于一个文档中包含的所有相对 URL 的根 URL.一份中只能有一个 <base> 元素. 可以通过使用 document.baseURI 的 JS 脚本查询 属性 包含全局属性 hr ...

  7. 酸菜鱼的 DP动态规划 刷题记录

    BZOJ1026: [SCOI2009]windy数 数位dp.很多小细节... 代码: #include <bits/stdc++.h> using namespace std; typ ...

  8. 已经安装了 AccessDatabaseEngine.exe,还是报错

    标题: SQL Server 导入和导出向导 ------------------------------ 操作无法完成. ------------------------------ 其他信息: 未 ...

  9. [BOI2003] Gem - 树形dp

    结论 不同颜色数不会超过 \(O(\log n)\) 然后就是很简单的树形dp了 顺便复习一下树形dp怎么写 #include <bits/stdc++.h> using namespac ...

  10. .gitignore文件说明-git提交时可忽略的文件

    在我们平时做项目时,总有一些文件不想提交到服务器的版本管理上 这时就要设置相应的忽略规则,来忽略这些文件的提交 规则 作用/mtk 过滤整个文件夹*.zip 过滤所有.zip文件/mtk/do.c 过 ...