vue脚手架开发详解,使用vue脚手架创建项目
前言在it行业几年了。一路走来,总结了很多python行业的高频访谈。看到大部分的新人对于各种面试问题还在回答或者包含各种疑难问题。
于是,我自己开发了一本访谈书,希望对大家有所帮助,也希望有更多的python新人真正加入这个行业,让Python火起来不仅仅停留在广告上。
微信小程序
搜索:Python面试宝典
或者关注个人博客原文:https://lienze.tech
也可以关注
微信公众号
,不定期发各种有趣的技术文章:Python编程学习
。e脚手架Vue脚手架指的是vue-cli。
它是单页应用程序的复杂支架,可以轻松创建新的应用程序,并可用于自动生成vue和webpack项目模板。
Webpack可以看作是
模块打包机
:它会分析项目结构,找到浏览器无法直接运行的js模块和其他扩展语言[Scss,TypeScript],打包成合适的格式供浏览器使用。要安装脚手架,使用vue脚手架。
在windows下配置cnmp环境。首先,通过nodejs官网下载nodejs。之后你就有了一个类似于pip的包管理工具npm。
由于网络问题,npm的默认使用可能不可用或延迟。可以将npm升级到cnpm,从国内淘宝镜像加载所需的npm软件源码。
m install-g cnpm-registry=https://registry.npm.taobao.org设置安装包缓存路径CNPM配置设置缓存 c: nodejs node _ cache 设置安装包位置CNPM配置设置前缀 c: nodejs node _ global 用-g命令安装的模块存储在
请根据您的个人需要设置您的文件位置。
npconfig set cache c: nodejs node _ cache web pack可以帮助自动打包js、css等资源,避免多次导入使用vue.js,方便路由管理。
Cnpm install vue-cli -g -g安装vue scaffold的参数代表全局安装,这样在环境变量生效时,可以直接使用命令行下的vue命令行等工具启动项目。
如果是用mac的同学,道理也差不多。安装nodejs后,可以设置npm,安装vue。如果不能使用命令,可以检查环境变量的配置。
第一个项目通过vue-cli脚手架打开一个项目。
E vuinit web pack我的项目-项目名称:项目的名称,不需要的话直接回车。注意:此处项目名称不能大写。-项目描述:项目描述,直接回车-作者:author-vue构建:默认构建方式可以是-安装vue-路由器?要安装vue的路由插件Use ESLint来Lint你的代码吗?你用ESLint检测你的代码吗?(ESLint是一个检查语法规则和代码风格的工具,可以用来保证写出语法正确、风格统一的代码。)-选择一个ESLint预设:选择分支样式1。标准(https://github.com/feross/standard)JS的标准样式2。Airbnb(3359github.com/Airbnb/JavaScript)JavaScript最合理的方法,这个github地址据说是JavaScript最合理的方法。3.none(自行配置)自行配置-设置单元测试?是否要安装单元测试-选择一个测试运行程序?选择一个单元测试运行程序1。Jest(Jest是一个开源的、基于Jasmine的JavaScript单元测试框架,由脸书发布)2。因果报应和摩卡3。无-设置e2e测试与夜间值班(是/否)?是否安装E2E测试框架NightWatch(E2E,即端到端,即所谓的“用户真实场景”)。)-我们应该在项目创建后为您运行“npm安装”吗?您想在项目创建后为您运行“npm安装”吗?是,使用npm(使用npm)是,使用yarn(使用yarn)否,我自己来处理(自己操作)启动开发服务器cd myproject #进入目录cnpm install #安装依赖cnpm运行dev #启动服务vue启动服务后,是一个部署测试开发环境的小型快捷服务。在该服务中,主要通过两个中间件来完成,即webpack-dev-middleware和webpack-hot-middleware。每次修改src目录下的代码,服务器都会动态检测,让浏览器自动刷新。
项目目录介绍——src #主开发目录,所有单文件组件都会放在这个目录——static #项目静态目录,所有css和js都会放在这个文件夹——dist #项目打包发布文件夹,最后要启动的单文件夹项目都在这个文件夹node _ modules # node的打包目录config #配置目录,主要用来区分开发环境、测试环境和上线环境build #项目打包时所依赖的目录,然后部署发布内容。在vue项目中,用App.vue文件渲染子组件页面,记得去掉vue的logo。
模板div id=app 路由器-视图//div/template