vue_webpack初始化项目
整体架构:
此处npm安装过于缓慢,因此使用的是淘宝的镜像cnpm
vue+webpack 初始化项目:
1、安装vue: cnpm install vue
检验版本: vue -V
2、创建一个vue项目:
全局安装vue-cli: cnpm install -g vue-cli
创建一个基于webpack模板的新项目: vue init webpack new-project
输入上面的命令后,下面的问题根据需要填写就可以了
Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
Project description:项目描述,直接回车
Author :作者
vue build 构建方式(暂且这么解释)
两个选择(上下箭头选择,回车即为选定)
1.Runtime + Compiler:recommended for most users
(译:运行+编译:被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项,适合大多数用户的
install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
Use ESLint to lint your code?是否使用ESLint检测你的代码?
(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
Pick an ESLint preset:选择分支风格
选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安装单元测试(暂不详细介绍)
Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕,会提示接下来的命令行
......
3、安装依赖:
cd new-project
cnpm install
4、启动: cnpm run dev
5、这个只能在本地跑,如果要在服务器上访问,需要执行: cnpm run build
代码总结如下:
cnpm install vue
cnpm install -g vue-cli
vue init webpack new-project
cd new-project
cnpm install
cnpm run dev
vue_webpack初始化项目的更多相关文章
- 使用node初始化项目
初始化项目 在建项目的时候经常会建很多文件夹和文件,今天使用node初始化项目自动生成这些内容. 执行步骤 执行命令 node init 初始化项目生成package.json 设置配置文件 var ...
- vue初始化项目,构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- Git帮助之初始化项目设置向导
初始化项目设置向导 Git设置: git config --global user.name "Your Name Here" # 设置Git提交时的默认用户名,推荐使用本站用户名 ...
- 一步步建立 Vue + Cesium 初始化项目
一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...
- react native初始化项目
打开命令行窗口,进入我们想要创建项目的父目录,输入命令: npm install -g yarn react-native-cli react-native init 项目名 进入新建的项目目录,执行 ...
- git初始化项目 以及 git常用操作
初始化项目 $ git config --global user.name "Your Name" 配置用户名 $ git config --global user.email ...
- Git 初始化项目、创建合并分支、回滚等常用方法总结
就在刚才查看资料时候, 看见一句话, 写的特别好: 当我的才华撑不起我的梦想的时候, 应该安静下来学习 配上我最喜欢动漫的一个角色: 红莲 1. Git 初始化项目 1). 创建新的知识库 echo ...
- 初探angluar_01 目录结构分析及初始化项目
简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录 用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...
- React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)
当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...
随机推荐
- cos改ip
IPADDRIP地址NETMASK子网掩码GATEWAY网关地址 通常,如果我们想更改主机地址为静态地址或者更改主机名,需要修改的几个文件包括:/etc/sysconfig/network Cento ...
- SpringCloud学习之Bus消息总线实现配置自动刷新(九)
前面两篇文章我们聊了Spring Cloud Config配置中心,当我们在更新github上面的配置以后,如果想要获取到最新的配置,需要手动刷新或者利用webhook的机制每次提交代码发送请求来刷新 ...
- django的model字段在保存的时候做预处理怎么办?
django的model字段在保存的时候做预处理怎么办? 比如这个model: class Book(Model): publish_date = DateField() 但是在保存时,用户输入数据是 ...
- 自动化运维工具ansible中常用模块总结
1.yum模块: name:要操作的软件包名字,可以是一个url或者本地rpm包路径,如name=nginx update_cache:更新软件包缓存,如update_cache=yes则更新软件包缓 ...
- POJ 1837:Balance 天平DP。。。
Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11878 Accepted: 7417 Descript ...
- EditText制作简单的登录界面
EditText与之前的TextView和Button的用法大体相同,用法案例如下: activity_edit_text.xml: <?xml version="1.0" ...
- drf序列化单改-整改-局部改-群改接口的实现
整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py """ 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验,校验的数据应该在 ...
- this, 闭包,箭头函数
闭包写法 //后台每个执行环境都有一个表示变量的对象---变量对象 //例如compare()函数调用 //compare的执行环境而言,其作用域链包含两个变量对象 本地活动对象 全局活动对象 全局变 ...
- Office文档WEB端在线浏览(转换成Html)
最近在做了一个项目,要求是对Office文档在线预览.下面给大家分享一下我的方法. 1.第一种方法(不建议使用)我是在网上搜了一个利用COM组件对office文档进行转换,但是此方法必须要装Offic ...
- goweb-goweb基础
goweb DNS工作原理 在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析. 如果hosts里没 ...