使用Vue创建一个新项目
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创建一个新项目的更多相关文章
- Vue Create 创建一个新项目 命令行创建和视图创建
Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...
- 【Cocos2d-x for WP8 学习整理】(1)创建一个新项目
喜大普奔 10.1假期之前看到了一个很振奋的消息,就是随着Cocos2d-x 2.2的发布,WP8/WIN8有史以来第一次的合并到主版本了. 之前 V2 ...
- Jersey 2.x 从Maven Archetype 创建一个新项目
创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...
- react:如何创建一个新项目
如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...
- 用Vue创建一个新的项目
vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大 ...
- 使用source创建一个新项目(将本地项目文件和github远程库链接)
1. 本地创建项目文件夹 2. 将本地的项目添加到source中(我使用的source版本为2.4.7.0) 3. github创建远程库 4. 关联本地项目文件和github库 确定添加就可以了. ...
- 微信小程序创建一个新项目
1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...
- 如何使用Androidstudio创建一个新项目
首先打开AS,然后 选择第一个选项Start a new Android Studio project 填写包名和项目名,点击next 选择项目类型,点击next 选择UI类型(都是死丢丢帮你生成的) ...
- 关于eclipse 在创建一个新项目时自动出现的appcompat v7如何解决
参考链接:https://blog.csdn.net/u013146742/article/details/51446438 我安装的ADT版本是23.0.2的新建的Android项目会自动带个app ...
随机推荐
- 展讯平台uboot启动流程
启动流程 1. Stage1 start.S代码结构 u-boot的stage1代码通常放在start.S文件中,用汇编语言,主要实现功能如下: (1) 定义入口: 该工作通过修改连接器脚本来完成. ...
- P3884 [JLOI2009]二叉树问题
--------------------- 链接:Miku --------------------- 这一道题只需要在倍增lca的板子上改一改就可以了. 宽度和深度可以在倍增lca的dfs预处理的时 ...
- Antenna Placement poj 3020
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12104 Accepted: 595 ...
- centos7&python3.6uwsgi安装
yum install python3-devel.x86_64 pip install uwsgi
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- Linux系统目录结构和常用目录主要存放内容的说明
目录结构图 常用目录 /: 根目录 一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home,其实是在告诉电脑,先从 /(根目录)开始,再进入 ...
- Android电源管理基础知识整理
前言 待机.睡眠与休眠的区别? Android开发者官网当中提到"idle states",该如何理解,这个状态会对设备及我们的程序造成何种影响? 进入Doze模式中的idle状态 ...
- git项目分支管理
分支管理 创建项目时,会针对不同环境创建两个常设分支(也可以算主分支,永久不会删除): master :生产环境的稳定分支,生产环境基于该分支构建.仅用来发布新版本,除了从 release 测试分支或 ...
- Milestone
为什么开博客? 事情要从一只蝙蝠说起... 准备用博客做什么? 记录自己在开发中遇到的issue以及解决的思路:记录一些读书笔记以便温故:练习如何制造仪式感,ect. ...
- 在W10系统中配置Java环境变量后,cmd命令提示符找不到java
java环境变量配置在W10系统上和以前有所区别,可能是W10版本导致也可能是W10一开始就出问题. 问题的表现就是你在环境变量里已经配置完JAVA_HOME,CLASSPATH,path之后在控制台 ...