1、环境

保证已经安装好了node\npm\vue等工具,将路径设置为想要建立新项目的文件夹路径

2、关于npm与cnpm
 npm包管理器,是集成在node中的,node环境安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致后面用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

安装cnpm:

在命令行中输入

npm install -g cnpm --registry=http://registry.npm.taobao.org

然后等待,完成之后,我们就可以用cnpm代替npm来安装依赖包了

3、安装vue-cli脚手架构建工具

在命令行中运行命令

cnpm install -g vue-cli

然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)

通过以上三步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

4、构建结构框架
脚手架装完后,在命令行中运行命令

vue init webpack firstVue

这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstlsqVue是整个项目文件夹的名称,自定义,这个文件夹会自动生成在你指定的目录中.

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好,随后,文件夹中就会出现很多基本的目录结构和代码。其中,我们主要在src目录中做修改。到这里,这个项目现在还只是一个结构框架,整个项目需要的依赖资源(就是前面说到的npm安装依赖包)都还没有安装。

5、安装项目所需的npm依赖包(使用前面的cnpm)
要安装依赖包,首先cd到项目文件夹(firstlsqVue文件夹)

cd firstlsqVue

然后运行命令

cnpm install

安装完成后,原来的目录结构中会出现一个新的文件夹:node_modules,里面就是我们项目需要的依赖包资源,安装完依赖包之后,就可以运行整个项目了

6、运行项目

在项目目录中,运行的命令如上面一种所示,

npm run dev

会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

使用Vue创建一个新项目的更多相关文章

  1. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  2. 【Cocos2d-x for WP8 学习整理】(1)创建一个新项目

    喜大普奔                         10.1假期之前看到了一个很振奋的消息,就是随着Cocos2d-x 2.2的发布,WP8/WIN8有史以来第一次的合并到主版本了. 之前 V2 ...

  3. Jersey 2.x 从Maven Archetype 创建一个新项目

    创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...

  4. react:如何创建一个新项目

    如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...

  5. 用Vue创建一个新的项目

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大 ...

  6. 使用source创建一个新项目(将本地项目文件和github远程库链接)

    1. 本地创建项目文件夹 2. 将本地的项目添加到source中(我使用的source版本为2.4.7.0) 3. github创建远程库  4. 关联本地项目文件和github库 确定添加就可以了. ...

  7. 微信小程序创建一个新项目

    1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...

  8. 如何使用Androidstudio创建一个新项目

    首先打开AS,然后 选择第一个选项Start a new Android Studio project 填写包名和项目名,点击next 选择项目类型,点击next 选择UI类型(都是死丢丢帮你生成的) ...

  9. 关于eclipse 在创建一个新项目时自动出现的appcompat v7如何解决

    参考链接:https://blog.csdn.net/u013146742/article/details/51446438 我安装的ADT版本是23.0.2的新建的Android项目会自动带个app ...

随机推荐

  1. Android实战项目——家庭记账本(四)

    今天是开发的第四天,完成的主要内容如下: 1.账单查询功能的完善以及查询结果的显示和编辑 2.侧边栏布局的实现 3.首页fragment中本月与上月对比账目情况 实现的效果如图: 已添加的账单内容以及 ...

  2. C#常见基础算法

    namespace 面试常见算法 { class Program { static void Main(string[] args) { ); Console.WriteLine(n1); Test2 ...

  3. 【内推】微软北京深圳招聘多名Cloud Solution Architect

    Azure is the most comprehensive, innovative and flexible cloud platform today and Microsoft is hirin ...

  4. linux 文件系统管理三部曲之一:磁盘分区

    硬盘和主板的连接的地方:叫接口,硬盘的接口类型: iops:i/o per second:每秒的读写次数. IDE(ata):并口(数据并行传输),理论最大传输 133MB/S:iops:100次 S ...

  5. 最短路径算法总结(floyd,dijkstra,bellman-ford)

    继续复习数据结构和算法,总结一下求解最短路径的一些算法. 弗洛伊德(floyd)算法 弗洛伊德算法是最容易理解的最短路径算法,可以求图中任意两点间的最短距离,但时间复杂度高达\(O(n^3)\),主要 ...

  6. send and recieve message with myself (python socket )

    # socket server import socket sk = socket.socket() sk.bind(("127.0.0.1",8082)) sk.listen() ...

  7. LeetCode 1046. 最后一块石头的重量 (贪心)

    有一堆石头,每块石头的重量都是正整数. 每一回合,从中选出两块最重的石头,然后将它们一起粉碎.假设石头的重量分别为 x 和 y,且 x <= y.那么粉碎的可能结果如下: 如果 x == y,那 ...

  8. vs2008 asp.net “无法连接到ASP.NET Development server”

    这是因为该网站启动ASP.NET Development server时使用的端口被占用而导致的. 解决方法: 1.在“解决方案资源管理器”中选中网站项目名称,然后切换到“属性”窗口 2.在“属性”窗 ...

  9. Java锁机制深入理解

    Java锁机制 背景知识 指令流水线 ​ CPU的基本工作是执行存储的指令序列,即程序.程序的执行过程实际上是不断地取出指令.分析指令.执行指令的过程. ​ 几乎所有的冯•诺伊曼型计算机的CPU,其工 ...

  10. mysql 数据备份。pymysql模块

    阅读目录 一 IDE工具介绍 二 MySQL数据备份 三 pymysql模块 一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具 下载链接:https:/ ...