导航:首页 > 源码编译 > vue脚手架创建项目源码

vue脚手架创建项目源码

发布时间:2022-09-08 08:06:48

❶ 使用vue-cli(vue脚手架)快速搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:(淘宝镜像命令)

其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

(1)全局安装 vue-cli ,在命令提示窗口执行:

(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

❷ vue 脚手架简单安装流程

能够显示版本号,说明环境已经安装好了。

注意:该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图:

按照提示,打开浏览器输入地址: http://localhost:8080
最终结果如下:

到此,vue 脚手架搭建完毕,创建的一个测试项目也正常运行。

❸ 创建Vue项目之前需要做哪些准备工作Vue项目如何创建指令是什么并对指令解

使用Vue,当然要先去学习它的使用方法了,请参考官方文档Vue

创建Vue项目,可以用官方的脚手架,请参考官方文档vue-cli

指令就是在HTML标签上以v-开头的属性,比如:v-for, v-if等以及自定义指令。Vue会根据指令去执行相应的操作,自定义指令就执行自定义的操作。详细请参考官文档。

❹ vue 脚手架安装完后为什么代码是白色的

  1. 什么叫代码是白色的,

  2. vue-cli 脚手架,只是一个快速搭建项目的框架

  3. 代码是白色你是说编辑器中代码的颜色吧

  4. 那个是你自己的编辑器设置的,与脚手架无关

❺ 求救:vue脚手架用界面化vue ui创建项目时出现报错Cannot set property 'context' of null怎么解决啊

重新新建项目,不要用npm,用yarn试下

❻ vue使用脚手架开发的,如何把脚手架还原出来

只有build代码没有源码想做二次开发?你想多了,打包后的代码就不是给人看的,如果有sourcemap还有可能(声明:我不确定sourcemap是否能还原出源文件),否则的话洗洗睡吧,去二次开发build代码还不如重构一遍来得有效率

❼ vue脚手架工具搭建的项目和script标签引入vue.js的项目,这两者什么区别

我也是初学,不知道理解的对不对,如有错误请轻喷。脚手架工具搭建的项目应该是把Vue作为一个模块(如CommonJS规范的模块)对待,在源码中引入vue模块,最终需要用构建工具(如webpack)载入模块,编写代码需要require('vue')。而直接用<script>标签引入相当于直接把vue.js里的代码引入到自己的代码中,里面直接有一个Vue全局变量,不需要构建工具就能直接使用了。

❽ vue2.0用脚手架搭建的官方例子怎么用webpack打包 如何配置

前言 vue2 然后通过以下命令安装 webpack cnpm install webpack -g 注:下面 orange 默认给出 npm 的安装方案,安装失败请自行转为 cnpm 安装 在需要创建工程的位置运行 vue init webpack-simple 工程名字<工程名字不能用中文> 或者创建 vue1.0 的项目,只需将命令换成 vue init webpack-simple#1.0 这里我们基于 2.x 开发的,直接使用第一种方法创建工程即可,下图是创建工程时的截图,需要你添加 Project name,Project description,Author. 图中已经给出下一步应该操作的步骤,我们按照步骤一步一步执行,这里 orange 不给大家一步一步列出。 注意:这里一定要使用 npm install 安装官方库,而不要使用淘宝镜像,会导致部分依赖丢失。 安装完成后,目录如下图。 然后我们运行我们的项目后浏览器会自动弹出,并展示以下页面 这里注意观察,默认给我们八个链接,可以根据这几个链接获得我们想要的学习资源,上面是必要的的链接(官方文档以及关注 vue 动态),下面是 vue 的生态系统,大家亲切的叫它们为全家桶。 二、Vue 全家桶 我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看) 一句命令搞定全家桶 npm install vue-router vue-resource vuex --save package.json 已经加入了我们的全家桶,node_moles 目录下也有对应的依赖包,注意这里现在还不能用扩展之后的方法,因为我们没引入到项目中来。 src/main.js 修改如下 import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import Vuex from 'vuex' import App from './App.vue' Vue.use(VueResource) Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#app', render: h => h(App) }) 这时我们的项目就能运行对应的扩展方法了 三、集成 Sass 作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。 我们干脆在 package.json 把版本写死,然后通过 npm install 安装 在 "devDependencies": {} 中添加下面几个依赖 "node-sass": "^3.8.0", "sass": "^0.5.0", "sass-loader": "^4.0.0", 好,我们 npm install 后,就可以正式使用 sass 啦 四、目录结构建议 依赖的安装到这里差不多结束了,其它大家需要的可以自定义安装 下面给出我的目录建议供大家参考, 这里的 img 目录放置图片,script 目录放置公共的工具函数,style 目录放置我们的 sass 文件, 你查看 App.vue 文件时不难发现,默认的把样式文件给到了模块里,这样样式一直跟着模块 orange 建议大家不要这样做,因为这样十分不利于样式的模块化,注意区分与模版模块化的区别, 我们单独设置 style 目录,并在目录当中对 sass 进行模块化处理(通过 import 引入 sass 模块) 对应的 App.vue 也变得非常简洁,代码如下 <style lang="sass"> @import "/style/base.scss"; </style> 五、rem 适配 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现,下面给出一种方案 在 index.html 中添加如下代码 <script> let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ; html.style.fontSize = window.rem + 'px'; </script> 这里基于宽 320px 的屏幕分成了 16 份,也就是 1rem = 20px,目前大多数设计稿都是根据 iphone6 的宽( 375px )走的,建议大家在这里分成 25 份,也就是 1rem = 15px,计算起来方便些。 简单说下 rem 原理:根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算。 我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值,达到移动端适配的目的 总结 以上就是这篇文章的全部内容了,本文作为移动端配置的基础篇,深入了解框架后才能继续构建网站,希望这是一个好的开始,有了这个架子再填充代码就方便了许多,不用再去考虑开发环境问题了。希望本文的内容对有需要的朋友们能有所帮助。

❾ 在vue脚手架中创建vue项目时输入指令后为什么弹出vue源码

输入的是什么指令啊?弹出的源码有截图吗?

❿ 不依赖vue-cli脚手架创建vue项目

我们一般创建vue项目都是通过vue-cli脚手架去创建,这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等
项目源码: https://github.com/wzp123321/myVueJSProByMySelf.git
1.新建项目

2.使用vscode打开项目

3.初始化

4.安装基本的 npm 包

5.创建文件夹以及文件

6.配置webpack.config.js
在这之前先安装一些依赖
模板解析依赖:

样式依赖:
css-loader: https://webpack.docschina.org/loaders/css-loader/

文件加载依赖

解析es6语法依赖: https://github.com/babel/babel-loader

这是一个webpack插件,可简化HTML文件的创建以服务您的webpack捆绑软件

现在就可以配置webpack.config.js,如果有什么不清楚的可以参考官网 https://webpack.docschina.org/configuration/

7.安装解析依赖 https://github.com/webpack/webpack-dev-server

8.修改package.json文件

9.配置babel,创建.babelrc文件
修改webpack.config.js

如果编译时报错的话可能是因为你没有安装依赖:

10.主要文件:
app.vue:

index.js:

html文件:

Vue项目文件夹大致参考

1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
mixins文件夹下可以写各种调用ajax请求方法的方法,然后在需要调用这些方法请求数据的文件中:

这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass();就能调用方法

2.components通用组件存放文件夹:
在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可

后续:
1.引入ant-design-vue:
具体引入操作可见官网 https://vue.ant.design/docs/vue/introce-cn/

2.引入Vue Router https://router.vuejs.org/zh/installation.html

路由配置文件:router/index.js

3.引入vuex

新建store/index.js

news/index.vue

4.页面顶部进度条插件Nprogress

使用:

阅读全文

与vue脚手架创建项目源码相关的资料

热点内容
卡尔曼滤波算法书籍 浏览:768
安卓手机怎么用爱思助手传文件进苹果手机上 浏览:843
安卓怎么下载60秒生存 浏览:802
外向式文件夹 浏览:235
dospdf 浏览:430
怎么修改腾讯云服务器ip 浏览:387
pdftoeps 浏览:493
为什么鸿蒙那么像安卓 浏览:735
安卓手机怎么拍自媒体视频 浏览:185
单片机各个中断的初始化 浏览:723
python怎么集合元素 浏览:480
python逐条解读 浏览:832
基于单片机的湿度控制 浏览:498
ios如何使用安卓的帐号 浏览:882
程序员公园采访 浏览:811
程序员实战教程要多长时间 浏览:974
企业数据加密技巧 浏览:134
租云服务器开发 浏览:813
程序员告白妈妈不同意 浏览:335
攻城掠地怎么查看服务器 浏览:600