• 基于webpack搭建vue-cli以及webstorm的设置


    N1.检查本地电脑是否安装node和npm

    安装vue-cli的前提是已经安装了npm

    是否安装npm检查命令

    npm -v

    如果出现版本号,说明已经安装了npm

    查看node版本号

    node -v

    如果未出现上述情况,请前往官网下载稳定版本,也可以点右边的穿梭机下载,目前vision用的node版本是 8.9.3 走你--node下载

    注意:可以直接在官网上下载8.9.3版本覆盖你本地的版本,安装之后运行npm -v可能会出现如下错误。


    解决方法:

    删除目录下"C:Users你的用户名AppDataRoaming pm ode_modules"文件下的npm文件就可以了!!

     

     

    安装webpack

    首先查看是否已经全局安装了webpack

    webpack -v

    如果出现版本号,表示已经成功安装了webpack,目前vision项目用的是3.10.0版本

    否则需全局安装webpack

    npm install -g webpack

    N2.安装vue-cli脚手架工具

    首先 查看电脑是否已经全局安装了脚手架工具(注意,此处查看是大写 V

    vue -V

    未出现版本号则需要全局安装vue-cli

    npm install vue-cli -g

    使用vue -V 检测是否成功安装到计算机

    N3.初始化项目(此处是熟悉vision项目详细搭建流程,可以跳过)

    使用 vue init 命令来初始化项目

    vue init <template-name> <project-name>

    <template-name>:表示模板名称,其中vue-cli提供了5种模板

    1.webpack:全面的webpack+vue-loader的模板,功能包括热加载,检测和css扩展等。

    2.webpack-simple:简单的webpack+vue-loader的模板,但是不包含其他功能。

    3.browerify

    4.browerify-simple(由于我们不使用browerify此处就不写了)

    5.simple:最简单的单页面应用模板

    由于我们的vision项目是基于webpack来的,所以选择webpack模板作为开发模板

    <project-name>:项目名称。要注意名称不可以大写,至于原因这里不介绍,可以看一下阮一峰大神的总结. 为什么文件名要使用小写

     

    介绍完模板,到此步骤已经可以搭建基于vue-cli脚手架的项目了

    这里由于盼哥已经在远端搭建了vision项目,所以我们的项目已经有了名称,就是vision!是不是很高大上?

    所以 我们就直接 vue init webpack 就可以了!

    命令:

    vue init webpack

    Project name:项目名称,直接回车。

    Project description:项目描述,默认为 a vue.js project

    Author:作者

    Install vue-router?是否安装vue路由插件,这里我们要使用,选择Y

    Use ESLint to lint your code?是否使用ESLint来限制你的代码错误和风格。经过讨论我们决定不使用。原因有两点:

    1.之前没使用过,查询一些资料这个限制甚至会限制单引号和双引号的使用。

    2.怕影响效率。

    Set up unit tests:是否需要安装单元测试工具 N

    Setup e2e tests with Nighwatch? 是否安装e2e来进行用户行为模拟测试 N

    接下来就可以使用 npm run dev运行项目了!

    N4.分析vue-cli模板以及修改部分内容(可以直接下一步)

    这里有一篇讲解非常、非常、极其、特别、厉害的文章,望仔细看一下! vue-cli#2.0 webpack配置分析

    build --编译任务的代码

    config –webpack的配置文件

    package.json–项目的基本信息

     

    运行项目默认的端口号是8080,但是该端口容易被占用。为了防止出现没必要的问题,我这里修改了端口号改为8777。当然如果你想改一个自己喜欢的端口号,可以进入

    config/index/js找到端口号,直接修改就行了!

     

    N5.注意事项

    我们项目从远端git clone 到本地的,是没有node_modules,也就是所谓的依赖的。

    在clone下来的vision项目下:

    cd vision

    npm install

    安装完毕之后文件中会有一个node_modules文件。这时执行npm run dev就可以运行vision项目了!如果你没有运行成功,记得叫人。

    N6.axios

    vue官方推荐使用axios来发送和请求数据,因为官方不在继续维护vue-resource,而之前我们的package.json中是没有安装axios的

    命令:

    npm install axios --save

    思考:

    1.安装其他插件时可以直接使用Vue.use()来使用,然而axios不可以。

    目前有三种方法可以解决:

    第一种:每个.vue文件都引入axios,这个方法就是麻烦,但是好用。

    第二种:直接修改axios原型链。该方法目前还没尝试。尝试之后在此处修改。

    第三种:结合Vuex使用,也就是封装一个action代码块。由于目前我们正在使用vuex,这个方法也在考虑中。

    N7使用webStorm来运行vision项目

    1.前往官网下载webstorm。激活码 走你 

    2.clone代码,下载依赖包 执行npm run dev来尝试代码是否可以运行成功

    3.安装vue插件,在webstorm的plugins搜索vue,并且安装插件

    4.将Es5.1改为Es6,webStorm默认支持的是Es5.1版本,如果不修改就会这样

    5.安装gerrit插件,公司使用gerrit,这个必须要安装。

    安装方式同第三步一样。

    6.安装之后打开本项目.git文件。.git文件是隐藏的,需要想办法让他显示出来。

    首先下载commit文件,否则会提交不上去你的代码commit-msg

    cd vision

    ls -a

    open .git

    打开里面的hooks文件,把下载好的文件放进去就ok了!具体参考盼哥写的 Gerrit使用流程+pycharm配置

    7.最后修改右上角的

    备注:为什么必须修改名称?之前波哥未修改名称,造成点击启动项目时启动三次。而且不时的刷新。最后发现是没有修改名称造成的。

    到此处,项目的搭建,以及你本地代码已经可以正常的运行,修改,提交了!

     

  • 相关阅读:
    BUUOJ | [ACTF新生赛2020]usualCrypt (多重加密)
    高数笔记 | 快速索引 + 期末总结(2019-2020学年第二学期)
    BUUOJ | SimpleRev(字符对称加密)
    CTF OJ 题目分类 | Reverse
    CPPU程序设计训练营清明天梯模拟赛题解
    数据可视化 | 2020年3月世界疫情实存人数地图
    CTF OJ 题目分类 | PWN
    BJDCTF 2nd | Strenuous_Huffman(二进制模拟)
    ssh连接慢优化
    日常问题处理
  • 原文地址:https://www.cnblogs.com/chinabin1993/p/8134841.html
Copyright © 2020-2023  润新知