vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始

2018年12月5日

第一阶段

虽然网上教程很多，但是还是记录一次完整的步骤

1.安装nodejs,网上一堆的教程，基本上下载后傻瓜式一路next

2.安装npm,网上一堆的教程，也是基本下载后傻瓜式一路next

3.安装完成运行cmd，查看是否安装成功

4.安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。

在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待

5.安装完成如下图。

6.安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

7.在桌面上新建项目 ResumeProgram

vue init webpack firstVue

--这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的

其中 ResumeProgram 是整个项目文件夹的名称，这个文件夹会自动生成在桌面

8.运行完成后会要写项目名称啊什么的，可以写一下，也可以在后面的pakeage.json里面修改

9.vs code 打开项目，作者这些自己改就行，这个时候有许多的插件是没有安装的，文件夹内是没有生成node_modules文件夹的

10.要安装依赖包，首先cd到项目文件夹(ResumeProgram 文件夹)，然后运行命令 cnpm install ，等待安装。

回车运行，抽个烟，慢慢等它自己安装

11.安装完成后查看vs code ,node_modules 已经出现在目录中，这里全是需要的依赖包

12.想要运行这个项目的话，在【终端】-【新建终端】，在打开的输入 npm run dev 回车，接着等

13.运行完成后，自动打开一个端口，复制这个链接到浏览器上，浪起来吧，少年~~~

第二阶段创建vue模板

我们基本只需要关心 src 文件夹，其他的基本不管

【【【为了以后创建页面省事，妥妥的必需，不然几十个页面搞死你】】】

ctrl+shift+p 出来吧，控制面板,输入 snippet

配置模板，我用的是下面的这个

{

"vue-template": {

"prefix": "vue",

"body": [

"",

"export default {",

" components:{},",

" props:{},",

" data(){",

" return {",

" }",

" },",

" watch:{",

"",

"},",

" computed:{",

"",

"},",

" methods:{",

"",

"},",

" created(){",

"",

"},",

" mounted(){",

"}",

"",

"description": "my vue template"

}

然后在新建的页面输入 vue 会自动带出这个模板

轻松+惬意 ~~

好了，今天就写到这。看看明天能不能够继续！

下一篇就写写配置页面和发布

vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始相关推荐

vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解话不多说上配置文件大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构效果 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...

vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始

vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始相关推荐

最新文章

热门文章